JavaScript - ECMAScript 2021

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

本章将讨论ECMAScript 2021中新增的所有功能。

ECMAScript 2021 中新增的功能

以下是添加到 ECMAScript 2021 版本 JavaScript 中的新方法、功能等。

数字分隔符 (_)
Promise any() 方法
String replaceAll() 方法
逻辑与赋值运算符 (&&=)
逻辑或赋值运算符 (||=)
空值合并赋值运算符 (??=)

这里，我们详细解释了每个功能。

数字分隔符 (_)

ECMAScript 2021 引入了数字分隔符。数字分隔符用于使数字更易于阅读。

示例

我们在下面的代码中添加了数字分隔符，以使数字更易于阅读。

<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() 方法

ECMAScript 2021 引入了 Promise any() 方法。promise.any() 方法会从 Promise 数组中返回最先完成的已完成的 Promise。

示例

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

我们已完成 promise1 并拒绝了 promise2。对于 Promise.any() 方法，JavaScript 控制流进入 then() 块，因为 promise1 已完成。

<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() 方法

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

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

示例

在下面的代码中，我们使用 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

逻辑与赋值运算符 (&&=) 运算符

ECMAScript 2021 向运算符引入了逻辑赋值运算符 (&&=、||= 和 ??=) 。JavaScript 逻辑与赋值运算符会在第一个操作数为真时，用第二个操作数更新第一个操作数的值。

示例

在下面的代码中，str 字符串的值不是虚值。因此，它会用“Hi”更新 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

逻辑或赋值运算符 (||=) 运算符

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

示例

在下面的代码中，str 的初始值为 false。因此，逻辑或赋值运算符将其值更新为第二个操作数，即 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

空值合并赋值 (??=) 运算符

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

示例

在下面的代码中，str 变量的值为 null。因此，空值合并赋值运算符将 'default' 值赋给 str 变量。

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

打印页面