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 來避免錯誤。

列印頁面