跳至主要内容

9 篇文章 含有標籤「ES2020」

檢視所有標籤

Nullish coalescing

· 閱讀時間約 7 分鐘
Justin Ridgewell

新的 Nullish 合併提案 (??) 添加了一個短路運算符,用於處理默認值。

你可能已經熟悉其他短路運算符 &&||。這兩個運算符處理“真值”和“假值”。假設代碼示例 lhs && rhs,如果 lhs(讀作 左側)是假值,該表達式求值為 lhs。否則,則求值為 rhs(讀作 右側)。而在代碼示例 lhs || rhs 中則相反。如果 lhs 是真值,該表達式求值為 lhs。否則,則求值為 rhs

可選鏈(Optional chaining)

· 閱讀時間約 5 分鐘
Maya Armyanova ([@Zmayski](https://twitter.com/Zmayski)),可選鏈的破壞者

在 JavaScript 中,長鏈的屬性訪問可能容易出錯,因為其中任何一步都可能評估為 nullundefined(也稱為“空值”)。在每一步進行屬性存在檢查,很容易變成深度嵌套的 if 語句或一個長長的 if 條件,複製屬性訪問的鏈路:

`globalThis`

· 閱讀時間約 2 分鐘
Mathias Bynens ([@mathias](https://twitter.com/mathias))

如果你曾經為瀏覽器編寫 JavaScript,可能使用過 window 來訪問全域 this。在 Node.js 中,你可能使用過 global。如果你編寫了需要同時在這兩個環境中運作的代碼,可能會檢測哪個可用,然後使用它 —— 但隨著你要支持的環境和使用情境增加,需要檢查的標識符列表也會越來越長,事情很快就會變得難以控制:

Promise 組合子

· 閱讀時間約 4 分鐘
Mathias Bynens ([@mathias](https://twitter.com/mathias))

自從在 ES2015 引入 Promise 以來,JavaScript 就支持了兩種 Promise 組合子:靜態方法 Promise.allPromise.race

目前有兩個新的提案正在標準化過程中:Promise.allSettledPromise.any。隨著這些新增內容,JavaScript 共有四種 Promise 組合子,每一種都支持不同的使用場景。

`String.prototype.matchAll`

· 閱讀時間約 3 分鐘
Mathias Bynens ([@mathias](https://twitter.com/mathias))

在字串中重複套用同一個正則表達式以獲取所有匹配的情況並不罕見。某種程度上,這已經可以通過使用 String#match 方法實現。

在這個例子中,我們找到所有僅由十六進位數字組成的字,然後記錄每個匹配項:

const string = 'Magic hex numbers: DEADBEEF CAFE';
const regex = /\b\p{ASCII_Hex_Digit}+\b/gu;
for (const match of string.match(regex)) {
console.log(match);
}

// 輸出:
//
// 'DEADBEEF'
// 'CAFE'

然而,這只會給你匹配的 子字串。通常,你不僅想要子字串,還希望獲取附加資訊,如每個子字串的索引,或者每次匹配時的捕捉群組。

這可以通過撰寫自己的迴圈並手動跟蹤匹配物件來實現,但這有點麻煩且不太方便:

const string = 'Magic hex numbers: DEADBEEF CAFE';
const regex = /\b\p{ASCII_Hex_Digit}+\b/gu;
let match;
while (match = regex.exec(string)) {
console.log(match);
}

// 輸出:
//
// [ 'DEADBEEF', index: 19, input: 'Magic hex numbers: DEADBEEF CAFE' ]
// [ 'CAFE', index: 28, input: 'Magic hex numbers: DEADBEEF CAFE' ]

新的 String#matchAll API 使這變得前所未有的簡單:現在你可以撰寫一個簡單的 for-of 迴圈以獲取所有匹配物件。

const string = 'Magic hex numbers: DEADBEEF CAFE';
const regex = /\b\p{ASCII_Hex_Digit}+\b/gu;
for (const match of string.matchAll(regex)) {
console.log(match);
}

// 輸出:
//
// [ 'DEADBEEF', index: 19, input: 'Magic hex numbers: DEADBEEF CAFE' ]
// [ 'CAFE', index: 28, input: 'Magic hex numbers: DEADBEEF CAFE' ]

String#matchAll 對於具有捕捉群組的正則表達式特別有用。它會提供每個匹配的完整資訊,包括捕捉群組。

const string = 'Favorite GitHub repos: tc39/ecma262 v8/v8.dev';
const regex = /\b(?<owner>[a-z0-9]+)\/(?<repo>[a-z0-9\.]+)\b/g;
for (const match of string.matchAll(regex)) {
console.log(`${match[0]} at ${match.index} with '${match.input}'`);
console.log(`→ owner: ${match.groups.owner}`);
console.log(`→ repo: ${match.groups.repo}`);
}

模組命名空間導出

· 閱讀時間約 1 分鐘
Mathias Bynens ([@mathias](https://twitter.com/mathias))

JavaScript 模組 中,先前已經可以使用以下語法:

import * as utils from './utils.mjs';

然而,並沒有對稱的 export 語法……直到現在

export * as utils from './utils.mjs';

這相當於以下:

import * as utils from './utils.mjs';
export { utils };

BigInt:JavaScript 中的任意精度整數

· 閱讀時間約 9 分鐘
Mathias Bynens ([@mathias](https://twitter.com/mathias))

BigInt 是 JavaScript 中一種新的數值型原始類型,能夠表示具有任意精度的整數。通過 BigInt,您可以安全地存儲並操作超出數值類型安全整數範圍的大整數。本文通過一些使用案例,並將 BigInt 與 JavaScript 中的 Number 進行比較,來解釋 Chrome 67 中的新功能。

動態 `import()`

· 閱讀時間約 5 分鐘
Mathias Bynens ([@mathias](https://twitter.com/mathias))

動態 import() 引入了一種新的類函數形式的 import,相較於靜態 import 解鎖了新的功能。本文比較了兩者並概述了新功能。