A lot of people are saying, “Hey, here’s the latest ES6 syntax,” “That’s another new es7 feature.” So what exactly is ES? What does ES6/ES7/ES8/ES9 have? What does it have to do with Javascript? If you were writing an ECMAScript article, how would you list the contents? So let me take you through the various aspects of ECMAScript and build a detailed body of knowledge

What is the ECMAScript

What is ECMAScript from an official perspective?

ECMAScript is a standardized specification for a scripting language developed by Brandon Edge of Netscape

Specifies the syntax, types, statements, keywords, reserved words, operators, and objects of the JavaScript language.

Here we focus on the word standardization. What is standardization?

Let me give you an example to help you understand

Presumably everyone can buy a few small furniture that need oneself to assemble occasionally online, contain a piece of similar inevitably among them “furniture assembler instruction book”. It instructs us from the first step to the last step how to assemble the small parts into a complete furniture

Therefore, this “specification” is the implementation of a complete furniture standard specification

On it is a “furniture assembly manual”, furniture is bought as a pile of parts, not a complete furniture. We need to assemble a real furniture according to the instructions.

Then this “manual” is assembled into a real furniture standard and specification

The analogy to JavaScript is the same!

Above is the ECMAScript specification for the IsArray API. This specification describes the steps from the first step to the last step to implement the IsArray method.

With such a detailed specification, then use THE JS API implementation. The result is the various JavaScript core apis we use today

ECMAScript is the standard and specification for implementing the various Ready-made JavaScript apis that we use as assembled furniture

After this analogy, you have a general idea of what ECMAScript is.

History of ECMAScript

  • In 1995, Netscape needed a scripting language to promote its browser. The task fell to Brendan Eich, who spent just over 10 days developing a scripting language called Mocha. Rename it JavaScript. And so JavaScript was born

  • In 1997, Netscape submitted version 1.1 of javascript as a proposal to the European Computer Manufacturers Association, also known as Ecma International, for standardization. Technical Committee 39, or TC39, undertook the standardization of the definitions, from which ECMAScript was born

  • Until 2015, when the sixth version of ECMAScript was released, there were seven sporadic releases (four of which were deprecated).

And as you all know, ES5 and ES6 release a lot of content

ES4 was abandoned for a time because the previous release was too slow due to various controversies. To solve this problem, TC39 rules have been adopted to release a new version every year since ES6 was released.

So ES5 and its predecessors are often referred to collectively as ES5,

ES6 and later versions are collectively called ES6+

Of course, in order to clearly distinguish the content of each version, it can be described by the release date, such as ES2015,ES2016

Having said all that, why do we need to learn and understand ES?

Why learn ECMAScript

ECMAScript is at the heart of JavaScript

In the browser, JavaScript consists of three main parts

  • ECMAScript
  • BOM
  • DOM

Here are some of the components of the Node environment, and you can see that ECMAScript is, of course, at its core

ECMAScript defines JavaScript’s core apis, which JavaScript then implements: keywords, reserved words, variables, data types, functions, operators…

An understanding of ECMAScript and its specifications is essential if you want to learn JavaScript better

Learning a language to understand the core of things, to better master the language! Then we can start the real program development, so that our program development process will become more smooth.

It’s easier to understand how the API is designed

There are a lot of great articles on the Web about hand-written implementations of JavaScript apis, like this one. What we need to do is understand why we implement the JavaScript API the way we do, by hand, rather than by rote.

The way to understand this is to look at the ECMAScript standard, which is kind of like a test case, and it allows us to think about how an API should be designed,

As shown in the figure below, the following standards/specifications must be met if isArray is to be implemented:

  1. Is the passed parameter notObjectReturns if notfalse
  2. Is the parameter passed in[object Array]Returns if yestrue
  3. Determine whetherProxy
    1. ProxyThere must behanlder
    2. proxyThe original arguments must be returned
// ES5 version of the implementation
Array.myIsArray = function (o) {
  return Object.prototype.toString.call(Object(o)) === "[object Array]";
};

2 / / way
const proxies = new WeakSet(a);function createProxy(target, handler) {
  const proxy = new Proxy(target, handler);

  proxies.add(proxy);
  return proxy;
}

function isProxy(obj) {
  return proxies.has(obj);
}

var mydata = createProxy([], {
  get(target, phrase) {
    // Intercept the read property operation
    if (phrase in target) {
      // If this phrase is in the dictionary
      return target[phrase]; // Return its translation
    } else {
      // Otherwise return the untranslated phrase
      returnphrase; }}});console.log(mydata.a);

Array.prototype.myisArray = function (arg) {
  if (typeofarg ! = ="object") {
    return false;
  }
  if (typeof arg === "object" && arg instanceof Array) {
    return true;
  }
  if (isProxy(arg)) {
    // 1. Hanlder must exist in Proxy
    // 2. Proxy must return original parameters
    return Array.prototype.myisArray(arg.none);
  }
  return false;
};

console.log(Array.prototype.myisArray(mydata));
Copy the code

Understand ECMAScript compatibility across browsers

Based on the increasingly rich carrier of information presentation, users can browse information through a variety of terminals, such as PC terminal viewer, PC application, mobile terminal browser, etc., then the corresponding requirements for front-end technical personnel will be higher, so front-end personnel need to know more about the characteristics of each browser.

ECMAScript is a good specification.

Different browser vendors use ECMAScript as the basis for their JavaScript implementations, but implementations vary

Some support ONLY ES5, some support ES6, and some support ES7. The specification allows us to know which features the API can use directly and which features are not in the specification (which need to be compiled and degraded via Babel).

We can see from the website in the picture

The version that all browsers support is ES5, and Chrome is the browser that supports the most ES features

The ECMAScript specification specifies five phases

The process of making changes in the ECMAScript specification is done by TC39 and is called the TC39 process. Starting with phase zero, the process is divided into five stages.

  1. Stage 0:Strawman– Preliminary ideas for additions or changes to the specification
  2. Stage 1:Proposal– Propose (purpose, solution) the problem and make formal recommendations for appropriate solutions
  3. Stage 2:Draft– Draft (draft of proposal specification)
  4. Stage 3:Candidate– At least one browser has implemented it. It’s almost a final draft, but it also accepts feedback and revises key issues
  5. Stage 4:Finished– Review completed, at least two browsers have been implemented, and the proposal is ready to be included in the latest specification – and shipped with the next release

Similar to the fulfillment of a company’s product requirements

  1. Stage 0– Product demand
  2. Stage 1-Organize everyone to conduct requirements review and collect suggestions from all parties
  3. Stage 2– The product will schedule the collected suggestions and requirements
  4. Stage 3– Implement v1.0 requirement release to pre-production environment and collect user and internal feedback
  5. Stage 4– Feedback is then scheduled to implement V2.0 and release to the formal environment

What did ECMAScript become after it was released?

When ECMAScript is released, there is an ecMA-262 standard specification document on the public network. If you want to know how a JS API is implemented, ECMA262 is the original official document

Who can make the ECMAScript specification/how to submit?

Method 1: Contact TC39 members directly.

But in view of the wall and foreign bosses contact inconvenient reasons, this way is not recommended

Method 2 (recommended): Join a JavaScript Interest group

JavaScript Language Standard (ECMAScript) Chinese discussion abbreviation JSCIG

JS Chinese interest group is a community led by Teacher He Shijun, and composed of alibaba and other big factories, as well as active students from ES community in China

The purpose is to represent the majority of DOMESTIC JS developers, in terms of language use efficiency to TC39 technical Committee recommendations.

The JS Chinese interest group is open on GitHub to discuss various ES issues. Interested students are welcome to participate in the discussion

Now let’s get to the environment. What are the features in each version of ES?

What are the features of each version of ECMAScript?

  • ES2009-ES5
  • ECMAScript ES2015-ES6
  • ECMAScript ES2016-ES7
  • ECMAScript ES2017-ES8
  • ECMAScript ES2018-ES9
  • ECMAScript ES2019-ES10
  • ECMAScript ES2021-ES11
  • ECMAScript ES2020-ES12
  • ECMAScript ES2022-ES13

Intl API

Why do we have a separate section for the Intl API?

So the Intl API is very useful at work

The ES versions we shared earlier are in a specification file called ECMA262

The contents of the Intl API are in a specification file called ECMA402

The Intl object is a namespace of the ECMAScript internationalization API that provides precise string comparison, number formatting, and date and time formatting.

The constructors of Collator, NumberFormat, and DateTimeFormat objects are properties of Intl objects.

The Intl API is a separate standard (in ECMA424). Not in the ECMA262

The Intl object is a namespace of the ECMAScript internationalization API that provides precise string comparison, number formatting, and date and time formatting.

The constructors for Collator, NumberFormat, and DateTimeFormat objects are properties of Intl objects. The documentation on this page includes these properties, as well as common features such as constructors used for internationalization and methods in other languages.

Scenario: Internationalize strings, numbers, and dates through the Intl API

Date formatting

// For example, we want the date information to appear in the format: "XXXX xxxx :xx:xx".
const res = new Intl.DateTimeFormat("zh", {
  year: "numeric"./* '2-digit' means that two digits must be used, so if the value is less than 10, it is automatically preceded by 0 */
  month: "2-digit".day: "2-digit".hour: "2-digit".minute: "2-digit".second: "2-digit".// Set to false to indicate that we use the 24-hour system
  hour12: false,
}).format(new Date());

// The effect in IE11 is exactly what we expected, - May 29, 2021 10:15:27
// In Chrome and Firefox, the date is not the Chinese version, but the slash -2021/05/29 10:15:27, which requires further character processing
console.log(res);
Copy the code

Number formatting

Consecutive numbers are separated by thousands separator

new Intl.NumberFormat().format(12345.6789);
// The result is: "12,345.679"
Copy the code

The number is less than zero

ES6 has a ready-made API for string completion, padStart() and padEnd(), but IE does not support them.

If you encounter a need for numeric completion, you can try the format() method here, which is supported by IE11+.

For example, if you want all numbers less than 10 to be preceded by a 0, you can do this:

new Intl.NumberFormat(undefined, {
  minimumIntegerDigits: 2,
}).format(8);
// The result is "08"
Copy the code

Amount in Chinese

Give a string of numbers, followed by the Chinese “yuan”. This can be set as follows:

new Intl.NumberFormat("zh-Hans", {
  style: "currency".currency: "CNY".currencyDisplay: "name",
}).format(12345.6789);
// The result is: "12,345.68 RMB"
Copy the code

The numbers are displayed in Chinese

For example, if we want to show the day of the week, we don’t need an array to map it to each other. Try the following:

const res = ` weekThe ${new Intl.NumberFormat("zh-Hans-CN-u-nu-hanidec").format(
  new Date().getDay(),
)}`;
// The result is: "Friday"
Copy the code

Chinese sorting

Intl. Collator object

The word collator means sort. The Intl.Collator object is the constructor of a Collator that supports language-sensitive string comparisons.

What if we want our Chinese to be sorted in alphabetical order?

In this case, you can use the BCF 47 language tag string zh in simplified Chinese. The code is as follows:

var arrUsername = [
  "Chen"."Deng chao"."Du Chun"."Feng Shaofeng"."Han geng"."Brief"."Huang Xiaoming"."Jia Nailang"."李晨"."Li Yifeng"."Lu Han"."Jing Boran"."Liu ye"."陆毅"."Sun Honglei",]; arrUsername.sort(new Intl.Collator("zh").compare);
/ / the result is: [" Chen ", "deng chao," "Du Chun", "through time and space", "han geng", "brief", "huang xiaoming," "smile", "jingboran", "15", "li yi feng", "liu ye", "lu", "Lu Han", "sun hong2 lei2"]
Copy the code

Reference documentation

  • JS Intl object complete introduction and application in Chinese – Zhang Xinxu
  • es6-presentations
  • On ECMAScript and JavaScript
  • the-new-javascript-es6
  • modern-js-with-es6
  • Modern JavaScript (since ES6 Harmony)
  • ECMAScript 6

The last

㊗️ congratulations on China’s first JS language proposal entering Stage 3 in ECMA

The article is shallow and humble, welcome everyone to see the comment area to leave your opinion!

Feel the harvest of students welcome to like, follow a wave!

The articles

  • The most complete ECMAScript guide
  • ECMAScript ES2015-ES6
  • ECMAScript ES2016-ES7
  • ECMAScript ES2017-ES8
  • ECMAScript ES2018-ES9
  • ECMAScript ES2019-ES10
  • ECMAScript ES2021-ES11
  • ECMAScript ES2020-ES12
  • ECMAScript ES2022-ES13