自 2015 年以來，JavaScript 每年都會進行語言更新。2021 年也不例外：今年，一些新功能進入了TC39 流程的第 4 階段，并且已經(jīng)在 Node.js 和大多數(shù)主要的現(xiàn)代瀏覽器中可用。

在本文中，我們將研究四個最重要的新功能。我們將介紹一種新的字符串方法、一種新的 Promise 方法、對數(shù)字可讀性的改進以及一種新的賦值簡寫。

replaceAll()

首先，我們有一個新的字符串原型方法replaceAll，它替換子字符串的每個實例。雖然我們可以使用現(xiàn)有的 replace 方法來做到這一點，但我們不得不求助于正則表達式，例如：

"1990-01-01".replace(/-/g, "/");

replaceAll 可以說更具可讀性：

"1990-01-01".replaceAll("-", "/");

使用replaceAll，不需要正則表達式。但是，只要提供了g標志，它仍然可以使用。

"1990-01-01".replaceAll(/-/g, "/");

支持

Chrome：85+

Firefox：77+ 

Safari：13.1+

Node：15.0.0+

Promise.any

今年已經(jīng)看到了對異步代碼處理的進一步改進Promise.any，它接受一組 Promise 并返回第一個解析的。如果每個 Promise 都被拒絕，則會引發(fā)錯誤。

讓我們拿四個 Promise 看看會發(fā)生什么：

const p1 = new Promise(( resolve , reject ) => setTimeout(reject, 1000, "p1"));
const p2 = new Promise(( resolve , reject ) => setTimeout(resolve, 2000, "p2"));
const p3 = new Promise(( resolve , reject ) => setTimeout(reject, 3000, "p3"));
const p4 = new Promise(( resolve , reject ) => setTimeout(resolve, 4000, "p4"));

?Promise.any?將返回先解決的。在這種情況下，p2。我們可以使用以下代碼進行測試：

async function getFirstResolvedPromise() { 
  const result = await Promise.any([p1, p2, p3, p4]); 
  console.log(result);
};

getFirstResolvedPromise(); // "p2"

現(xiàn)在我們可以使用四種方法來處理 Promise 數(shù)組：

• ?Promise.all? — 返回已解決的 Promise 數(shù)組，一旦所有 Promise 都已解決
• ?Promise.allSettled? （2020 年新增）— 一旦所有 Promise 都已解決或被拒絕，則返回一個 Promise 數(shù)組，無論它們是已解決還是已拒絕
• ?Promise.race? — 返回第一個已解決或被拒絕的 Promise
• ?Promise.any? — 返回第一個已解決的 Promise

支持

Chrome：85+ 

Firefox：79+

Safari：14+

Node：15.0.0+

邏輯賦值運算符

自 2020 年引入空合并運算符????以來，我們現(xiàn)在擁有三個邏輯運算符：

• ?&&? — 邏輯與
• ?||? — 邏輯或
• ???? — 空合并運算符

這些簡寫允許我們根據(jù)一個值是真還是假——或者，在?這種情況下?——一個值是否為空（null或undefined）來簡潔地解析表達式。

現(xiàn)在，我們有了更簡潔的使用這些運算符賦值的簡寫：

• ?&&=? — 分配一個變量，如果變量為真
• ?||=? — 分配一個變量，如果變量是假的
• ???=? — 分配一個變量，如果該變量為空

在下面的代碼中，每組三個語句是等效的：

// 邏輯與賦值
a &&= b; 
a = a && b; 
a = a ? b： a;

// 邏輯或賦值
a ||= b; 
a = a || b;
a = a ? a : b;

// 邏輯空賦值
a ??= b; 
a = a ?? b;
a = a === null || a === undefined?b : a;

在下面的示例中，a當(dāng)每個表達式運行時，變量將被重新分配一個新值。這是代碼：

let a = true；
const b = false, c = null, d = 10;

a &&= b; 
console.log(a); // false
a ||= c; 
console.log(a); // null

a ??= d; 
console.log(a); // 10

這些新的賦值操作符加入數(shù)學(xué)賦值運算符?+=?，?-=?，?*=?，?/=?，?**=?和?%=?，還有位運算符。

支持

Chrome：85+ 

Firefox：79+

Safari：14+

Node：15.0.0+

數(shù)字分隔符

最后，今年廣泛采用了一項功能，該功能顯著提高了處理大量數(shù)字或大量小數(shù)位的人員的可讀性！

現(xiàn)在，我們可以使用下劃線來分隔數(shù)字。

const a = 100000000;
const b = 100_000_000;
console.log(a === b); // true

雖然a和b相同，b但更容易識別為 1 億。在實踐中，數(shù)字分隔符主要用作千位分隔符，盡管這種用法沒有強制執(zhí)行。數(shù)字分隔符可用于浮點數(shù)和 BigInt 值（于 2020 年引入）。下面是一些代碼來展示這些是如何工作的：

const float = 3.141_592_653_59;
const bigInt = 9_007_199_254_740_992n;

它們也支持十六進制、八進制和二進制數(shù)，例如十六進制?0xFF_FF_FF?或?0x_00_00_00?.

請注意，?_?不能在數(shù)字的開頭或結(jié)尾（或首字母之后0）使用。此外，它不能與小數(shù)點相鄰，并且不能連續(xù)使用多個下劃線。

支持

Chrome：75+

Firefox ：70+

Safari：13+

Node：12.5.0+