[译] JavaScript ES2021 中激动人心的特性

关注

原创最新推荐文章于 2026-09-24 21:05:27 发布 2.3k 阅读 AI 写同款· GEO 优化 ›

JavaScript新特性：ES6之后的发展本文深入探讨了JavaScript在ES6之后的发展，包括幂运算符、对象属性的扩展语法、数组的includes方法、SIMD技术以及WebAssembly (WASM)的出现。这些新特性与技术的介绍，为JavaScript开发者提供了新的工具和思路，以应对日益增长的性能和应用复杂度需求。阅读详情

原文地址：JavaScript ES2021 Exciting Features
原文作者：Taran
译文出自：juejin翻译计划
本文永久链接：https://github.com/xitu/gold-miner/blob/master/article/2020/exciting-features-of-javascript-es2021-es12.md
译者：tonylua
校对者：samyu2000, @HurryOwen

每年，JavaScript 都会增添新的特性。今年的 ES2020 或称 ES11 业已发布 (参阅这篇 ES2020 特性的文章)，而 ES2021 或者说是 ES12 预计将于 2021 年中旬发布。

每年被增添到 JavaScript 中的特性都会经历一个四阶段的过程，第四阶段也就是最终的一个。在本文中，我将讨论已经到达第四阶段并已被增添到 Google Chrome V8 引擎中的特性。

本文讨论新特性的列表

String.prototype.replaceAll
Promise.any
逻辑操作符和赋值表达式
数值分隔符
Intl.ListFormat
Intl.DateTimeFormat 的 dateStyle 和 timeStyle 选项

String.prototype.replaceAll

在 JavaScript 中，replace() 方法仅替换一个字符串中某模式（pattern）的首个实例。如果我们要替换一个字符串中某模式的所有匹配项，唯一的方法就是使用有全局标记的正则。

拟议的方法 replaceAll() 会返回一个新字符串，该字符串中用一个替换项替换了原字符串中所有匹配了某模式的部分。模式可以是一个字符串或一个正则表达式，而替换项可以是一个字符串或一个应用于每个匹配项的函数。

let str = 'I use linux, I love linux'
str = str.replaceAll('linux', 'windows');

console.log(str)

/****  输出  ****/
// I use windows, I love windows

Promise.any

ES2021 将引入 Promise.any() 方法，一旦该方法从 promise 列表或数组中命中首个 resolve 的 promise （正如 Example 1a 中所解释的那样），就会短路并返回一个值。如果所有 promise 都被 reject ，该方法则将抛出一个聚合的错误信息 （在 Example 1b 里有所展示）。

其区别于 Promise.race() 之处在于，后者在某个 promise 率先 resolve 或 reject 后都会短路。

Example 1a: 尽管某个 promise 的 reject 早于另一个 promise 的 resolve，Promise.any() 仍将返回那个首先 resolve 的 promise。

Promise.any([
  new Promise((resolve, reject) => setTimeout(reject, 200, 'Third')),
  new Promise((resolve, reject) => setTimeout(resolve, 1000, 'Second')),
  new Promise((resolve, reject) => setTimeout(resolve, 2000, 'First')),
])
.then(value => console.log(`Result: ${value}`))
.catch (err => console.log(err))

/****  输出  ****/
// Result: Second

Example 1b: 当所有 promise 都被 reject 后，AggregateError 即被抛出。

Promise.any([
  Promise.reject('Error 1'),
  Promise.reject('Error 2'),
  Promise.reject('Error 3')
])
.then(value => console.log(`Result: ${value}`))
.catch (err => console.log(err))

/****  输出  ****/
// AggregateError: All promises were rejected

逻辑操作符和赋值表达式

在 JavaScript 中，有许多赋值表达式和逻辑操作符，如下所示：

// 赋值表达式例子
let num = 5
num+=10
console.log(num) // 15

// 逻辑操作符例子

let num1 = 6
let num2 = 3

console.log(num1 === 6 && num2 === 2) // false
console.log(num1 === 6 || num2 === 2) // true

在新提案里，我们将有能力结合逻辑操作符和赋值表达式。下面是一些 &&、 || 和 ?? 的例子：

`&&` 逻辑赋值操作符

该操作符用来在仅当左侧（译注：原文为 LHS，即 Left-hand Side）变量为真值（truthy）时，才将右侧（RHS）变量赋值给左侧变量。

// `&&` 逻辑赋值操作符
let num1 = 5
let num2 = 10

num1 &&= num2

console.log(num1) // 10

// 行 5 也可写作以下方式
// 1. num1 && (num1 = num2)
// 2. if (num1) num1 = num2

`||` 逻辑赋值操作符

该操作符用来在仅当左侧变量为虚值（falsy）时，才将右侧变量赋值给左侧变量。

// `||` 逻辑赋值操作符
let num1
let num2 = 10

num1 ||= num2

console.log(num1) // 10

// 行 5 也可写作以下方式
// 1. num1 || (num1 = num2)
// 2. if (!num1) num1 = num2

`??` 逻辑赋值操作符

ES2020 已经引入了空值合并操作符（Nullish Coalescing operator，即 ??），该操作符亦可与赋值表达式结合。在仅当左侧变量为 undefined 或 null 时，该操作符才将右侧变量赋值给左侧变量。

// `??` 逻辑赋值操作符
let num1
let num2 = 10

num1 ??= num2
console.log(num1) // 10

num1 = false
num1 ??= num2
console.log(num1) // false

// 行 5 也可写作以下方式
// num1 ?? (num1 = num2)

数值分隔符

数字分隔符（Numeric Separators）的引入将通过使用 _（下划线）符号在数字分组间提供一个隔离以便于阅读数值。例如：

let number = 100_000 

console.log(number)

/****  输出  ****/
// 100000

Intl.ListFormat

ListFormat 对象的构造方法有两个参数，皆为可选。首个参数是一个语言标识（locale），而第二个参数是一个选项对象 -- 包含了 style 和 type 两个属性。

new Intl.ListFormat([locales[, options]])

Intl.ListFormat 有一个叫做 format() 的方法，接受一个数组作为参数，并因 locale 和选项而异以相应的方式格式化该参数数组。

以下给出的是一些结合了不同 locale 和选项的例子。

const arr = ['Pen', 'Pencil', 'Paper']

let obj = new Intl.ListFormat('en', { style: 'short', type: 'conjunction' })
console.log(obj.format(arr)) 

/****  输出  ****/
// Pen, Pencil, & Paper


obj = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })
console.log(obj.format(arr)) 

/****  输出  ****/
// Pen, Pencil, and Paper


obj = new Intl.ListFormat('en', { style: 'narrow', type: 'conjunction' })
console.log(obj.format(arr)) 

/****  输出  ****/
// Pen, Pencil, Paper


// 传入意大利语标识
obj = new Intl.ListFormat('it', { style: 'short', type: 'conjunction' })
console.log(obj.format(arr)) 

/****  输出  ****/
// Pen, Pencil e Paper


// 传入德语标识
obj = new Intl.ListFormat('de', { style: 'long', type: 'conjunction' })
console.log(obj.format(arr)) 

/****  输出  ****/
// Pen, Pencil und Paper

Intl.DateTimeFormat 的 dateStyle 和 timeStyle 选项

Intl.DateTimeFormat 对象是一个支持语言敏感日期和时间格式化的构造器。拟议的 dateStyle 和 timeStyle 选项可被用于获取一个 locale 特有的日期和给定长度的时间。

一些不同选项和语言（locale）的例子展示在此：

// 短格式的时间
let o = new Intl.DateTimeFormat('en' , { timeStyle: 'short' })
console.log(o.format(Date.now()))
// 11:27 PM


// 中等格式的时间
o = new Intl.DateTimeFormat('en' , { timeStyle: 'medium'})
console.log(o.format(Date.now()))
// 11:27:57 PM


// 长格式的时间
o = new Intl.DateTimeFormat('en' , { timeStyle: 'long' })
console.log(o.format(Date.now()))
// 11:27:57 PM GMT+11


// 短格式的日期
o = new Intl.DateTimeFormat('en' , { dateStyle: 'short'})
console.log(o.format(Date.now()))
// 10/6/20


// 中等格式的日期
o = new Intl.DateTimeFormat('en' , { dateStyle: 'medium'})
console.log(o.format(Date.now()))
// Oct 6, 2020


// 长格式的日期
o = new Intl.DateTimeFormat('en' , { dateStyle: 'long'})
console.log(o.format(Date.now()))
// October 6, 2020

dateStyle 和 timeStyle 选项共用并结合不同语言标识的例子，如下所示：

let abc

// 英语
abc = new Intl.DateTimeFormat('en' , { timeStyle: 'short', dateStyle: 'long'})
console.log(abc.format(Date.now()))
// October 6, 2020 at 11:40 PM


// 意大利语
abc = new Intl.DateTimeFormat('it' , { timeStyle: 'short', dateStyle: 'long'})
console.log(abc.format(Date.now()))
// 6 ottobre 2020 23:40


// 德语
abc = new Intl.DateTimeFormat('de' , { timeStyle: 'short', dateStyle: 'long'})
console.log(abc.format(Date.now()))
// 6. Oktober 2020 um 23:40