Javascript 简明教程

JavaScript - ECMAScript 2021

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

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

New Features Added in ECMAScript 2021

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

Numeric Separators (_)
Promise any() method
String replaceAll() method
逻辑与赋值运算符 (&&=)
Logical OR Assignment (||=)
Nullish Coalescing Assignment (??=)

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

Numeric Separators (_)

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

Example

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

<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。

Example

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

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

<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() 方法用于用另一个子字符串替换特定子字符串。

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

Example

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

<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 赋值运算符使用第二个操作数更新第一个操作数的值。

Example

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

<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 赋值运算符。如果第一个操作数为假，则它使用第二个操作数更新第一个操作数的值。

Example

在下面的代码中，str 的初始值为假。所以，逻辑 OR 赋值运算符使用第二个操作数（即 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，此运算符将更新左操作数的值。

Example

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

<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 来避免错误。