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">num 的值为: </div>
   <script>
      let num = 90_00_000;
      document.getElementById("output").innerHTML +=  num;
   </script>
</body>
</html>

输出

num 的值为: 9000000

Promise any() 方法

ECMAScript 2021 引入了 Promise any() 方法。promise.any() 方法可以实现 Promise 数组中最早解析的 Promise。

示例

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

我们解析了 Promise1，并拒绝了 Promise2。对于 Promise.any() 方法，JavaScript 控制权在 promise1 解析后进入 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!

字符串 replaceAll() 方法

ECMAScript 2021 为字符串引入了字符串 replaceAll() 方法。字符串 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 逻辑与赋值运算符会在第一个操作数为 True 时，使用第二个操作数更新第一个操作数的值。

示例

在下面的代码中，str 字符串的值不为 false。因此，它将 str 变量的值更新为"Hi"。

<html>
<body>
   <div id = "output">str 的值是: </div>
   <script>
      let str = "Hello";
      str &&= "Hi";
      document.getElementById("output").innerHTML += str;
   </script>
</body>
</html>

输出

str 的值是: Hi

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

ECMAScript 2021 将逻辑或赋值运算符引入到运算符中。如果第一个操作数为 false，则使用第二个操作数更新第一个操作数的值。

示例

在下面的代码中，str 的初始值为 false。因此，逻辑或赋值运算符使用第二个操作数(即 10)更新其值。

<html>
<body>
   <div id = "output">str 的值是: </div>
   <script>
      let str = false;
      str ||= 10;
      document.getElementById("output").innerHTML += str;
   </script>
</body>
</html>

输出

str 的值是: 10

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

ECMAScript 2021 为运算符引入了空值合并赋值运算符。如果左操作数为 undefined 或 null，此运算符会更新其值。

示例

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

<html>
<body>
   <div id = "output">str 的值是: </div>
   <script>
      let str = null;
      str ??= "default";
      document.getElementById("output").innerHTML += str;
   </script>
</body>
</html>

输出

str 的值是: default

警告:部分浏览器不支持上述某些功能。因此，您可以使用 polyfill 来避免错误。