Javascript 简明教程

JavaScript - ECMAScript 2021

ECMAScript 2021 标准于 2021 年发布。ECMAScript 2021 给 JavaScript 带来了许多显着特性。String replaceAll() 方法的引入简化了全局字符串替换。逻辑赋值运算符（ &&= 、 ||= 和 ??= ）增强了代码简洁性。此更新专注于提高开发人员的生产力和代码可读性。

The ECMAScript 2021 standard was released in 2021. ECMAScript 2021 brought many notable features to JavaScript. The introduction of the String replaceAll() method simplified global string replacement. Logical Assignment Operators, (&&=, ||=, and ??=), enhanced code conciseness. This update focused on improving developer productivity and code readability.

本章将讨论 ECMAScript 2021 中所有新添加的特性。

This chapter will discuss all the newly added features in ECMAScript 2021.

New Features Added in ECMAScript 2021

以下是 JavaScript 的 ECMAScript 2021 版本中添加的新方法、特性等。

Here are the new methods, features, etc., added to the ECMAScript 2021 version of JavaScript.

  1. Numeric Separators (_)

  2. Promise any() method

  3. String replaceAll() method

  4. Logical AND Assignment Operator (&&=)

  5. Logical OR Assignment (||=)

  6. Nullish Coalescing Assignment (??=)

这里，我们详细解释了每项特性。

Here, we have explained each feature in detail.

Numeric Separators (_)

ECMAScript 2021 引入了数字分隔符。数字分隔符用于使数字更具可读性。

ECMAScript 2021 introduced numeric separators. The numeric seprators are used to make the number more readable.

Example

我们在下例中添加了一个数字分隔符，以使数字更具可读性。

We added a numeric separator in the code below to make the number more readable.

<html>
<body>
   <div id = "output">The value of the num is: </div>
   <script>
      let num = 90_00_000;
      document.getElementById("output").innerHTML +=  num;
   </script>
</body>
</html>
The value of the num is: 9000000

Promise any()Method

ECMAScript 2021 引入了 Promise any() 方法。promise.any() 方法满足一组 promise 中最早解决的任何 promise。

ECMAScript 2021 introduced Promise any() method. The promise.any() method fulfills any promise from the array of promises, which resolves at the earliest.

Example

在下面的代码中，我们创建了多个 Promise，并将它们传递给 Promise.any() 方法作为参数。

In the below code, we have created multiple promises and passed them as an argument of the Promise.any() method.

我们已经解决了 promise1，并拒绝了 promise2。对于 Promise.any() 方法，当 promise1 得到解决时，JavaScript 控制将进入 then() 块。

We have resolved the promise1 and rejected the promise2. For the Promise.any() method, JavaScript control goes into the then() block as promise1 gets resolved.

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      const promise1 = new Promise((res, rej) => res());
      const promise2 = new Promise((res, rej) => rej());
      const promises = [promise1, promise2];

      Promise.any(promises)
         .then(() => {
            output.innerHTML += 'One or more promises are resolved!';
         })
         .catch((err) => {
            output.innerHTML += 'All promises are rejected:' + err;
         });
   </script>
</body>
</html>
One or more promises are resolved!

String replaceAll() Method

ECMAScript 2021 为字符串引入了 String replaceAll() 方法。 string replaceAll() 方法用于用另一个子字符串替换特定子字符串。

The ECMAScript 2021 introduced String replaceAll() method to the Strings. The string replaceAll() method is used to replace the particular substring with another substring.

replaceAll() 方法将字符串或正则表达式作为参数。

The replaceAll() method takes either string or regular expression as a parameter.

Example

在下面的代码中，我们使用 replaceAll() 方法将小写“a”替换为大写“A”。

In the below code, we have replaced the lowercase 'a' with the uppercase 'A' using the replaceAll() method.

<html>
<body>
   <div id = "output1">Original string is: </div>
   <div id = "output2">Updated string is: </div>
   <script>
      let str = "abcd abcd abcd abcd";
      document.getElementById("output1").innerHTML += str;
      let updatedStr = str.replaceAll("a", "A");
      document.getElementById("output2").innerHTML += updatedStr;
   </script>
</body>
</html>
Original string is: abcd abcd abcd abcd
Updated string is: Abcd Abcd Abcd Abcd

Logical AND Assignment Operator (&&=) Operator

ECMAScript 2021 为运算符引入了逻辑赋值运算符（&&=、||= 和 ??=）。如果第一个操作数为真，则 JavaScript 逻辑 AND 赋值运算符使用第二个操作数更新第一个操作数的值。

ECMAScript 2021 introduced the logical assignment operators (&&=, ||= and ??=) to the operators. The JavaScript logical AND Assignment operator updates the value of the first operand with the second operand if the first operand is true.

Example

在下面的代码中，str 字符串的值不是假值。所以，它使用“Hi”更新 an str 变量的值。

In the code below, the str string’s value is not falsy. So, it updates the value of an str variable with 'Hi'.

<html>
<body>
   <div id = "output">The value of the str is: </div>
   <script>
      let str = "Hello";
      str &&= "Hi";
      document.getElementById("output").innerHTML += str;
   </script>
</body>
</html>
The value of the str is: Hi

Logical OR Assignment (||=) Operator

ECMAScript 2021 为运算符引入了逻辑 OR 赋值运算符。如果第一个操作数为假，则它使用第二个操作数更新第一个操作数的值。

ECMAScript 2021 introduced the logical OR Assignment operator to operators. It updates the value of the first operand with the second operand if the first operand is false.

Example

在下面的代码中，str 的初始值为假。所以，逻辑 OR 赋值运算符使用第二个操作数（即 10）更新其值。

In the code below, the initial value of the str is false. So, the Logical OR assignment operator updates its value with the second operand, which is 10.

<html>
<body>
   <div id = "output">The value of the str is: </div>
   <script>
      let str = false;
      str ||= 10;
      document.getElementById("output").innerHTML += str;
   </script>
</body>
</html>
The value of the str is: 10

Nullish Coalescing Assignment (??=) Operator

ECMAScript 2021 为运算符引入了 null 合并赋值运算符。如果左操作数未定义或为 null，此运算符将更新左操作数的值。

The ECMAScript 2021 introduced the nullish coalescing assignment operator to operators. This operator updates the value of the left operand if it is undefined or null.

Example

在下面的代码中，str 变量的值为 null。所以，null 合并赋值运算符为 str 变量赋值“default”值。

In the below code, the value of the str variable is null. So, the nullish coalescing assignment operator assigns the 'default' value to the str variable.

<html>
<body>
   <div id = "output">The value of the str is: </div>
   <script>
      let str = null;
      str ??= "default";
      document.getElementById("output").innerHTML += str;
   </script>
</body>
</html>
The value of the str is: default

警告 - 某些浏览器不支持上述某些功能。所以，你可以使用 polyfill 来避免错误。

Warning – Some of the above features are not supported by some browsers. So, you can use the polyfill to avoid errors.