JavaScript ES2021最值得期待的新特性解析

每年，JavaScript 的更新都会添加新特性。今年发布的是 ES2020 或称 ES11，预计 ES2021 或称 ES12 将于 2021 年中发布。添加到 JavaScript 的新特性都会经历四个阶段。在本文中，我将讨论已经进入第四阶段且已添加到谷歌 Chrome V8 引擎中的新特性。

讨论的新特性列表

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

String.prototype.replaceAll

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

提案方法 replaceAll() 返回一个新字符串，其中模式的所有匹配都会被替代项替换。模式可以是字符串或正则表达式，而替换项可以是字符串或针对每次匹配执行的函数。

let str = 'I use linux, I love linux'
str = str.replaceAll('linux', 'windows');
 
console.log(str)
 
/**** Output ****/
// I use windows, I love windows

let str = 'I use linux, I love linux'

str = str.replaceAll('linux', 'windows');

console.log(str)

/**** Output ****/

// I use windows, I love windows

Promise.any

ES2021 将引入 Promise.any() 方法，只要这个方法命中了 Promise 列表 / 数组中的第一个已解析的 Promise，就会短路并返回一个值（如示例 1a 中所述）。如果所有的 promise 都被拒绝，那么它将抛出一个汇总错误消息（如示例 1b 所示）。

它与 Promise.race() 不同，因为一旦给定的 Promise 之一被解析或拒绝，Promise.any() 方法就会短路。

示例 1a：即使一个 Promise 在一个已解析的 Promise 之前被拒绝，Promise.any() 仍将返回第一个已解析的 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))
 
/**** Output ****/
// Result: Second

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))

/**** Output ****/

// Result: Second

示例 1b：当所有的 Promise 都被拒绝时，将抛出 AggregateError。

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))
 
/**** Output ****/
// Result: Second

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))

/**** Output ****/

// Result: Second

逻辑运算符和赋值表达式

在 JavaScript 中有许多赋值运算符和逻辑运算符，如以下基本示例：

// Assignment Operator Example
let num = 5
num+=10
console.log(num) // 15
// Logical Operator Example
let num1 = 6
let num2 = 3
console.log(num1 === 6 &amp;&amp; num2 === 2) // false
console.log(num1 === 6 || num2 === 2) // true

// Assignment Operator Example

let num = 5

num+=10

console.log(num) // 15

// Logical Operator Example

let num1 = 6

let num2 = 3

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

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

新的提案让我们将能把逻辑运算符和赋值运算符结合起来。以下是 &&、||和?? 运算符的一些示例：

带有 && 运算符的逻辑赋值运算符

仅当 LHS 值为真时，才将 RHS 变量值赋给 LHS 变量。

// Logical Assignment Operator with &amp;&amp; operator
let num1 = 5
let num2 = 10
num1 &amp;&amp;= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 &amp;&amp; (num1 = num2)
// 2. if (num1) num1 = num2

// Logical Assignment Operator with && operator

let num1 = 5

let num2 = 10

num1 &&= num2

console.log(num1) // 10

// Line 5 can also be written as following ways

// 1. num1 && (num1 = num2)

// 2. if (num1) num1 = num2

带有||的运算符逻辑赋值运算符

仅当 LHS 值为假时，才将 RHS 变量值赋给 LHS 变量。

// Logical Assignment Operator with || operator
let num1
let num2 = 10
num1 ||= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 || (num1 = num2)
// 2. if (!num1) num1 = num2

// Logical Assignment Operator with || operator

let num1

let num2 = 10

num1 ||= num2

console.log(num1) // 10

// Line 5 can also be written as following ways

// 1. num1 || (num1 = num2)

// 2. if (!num1) num1 = num2

带有?? 运算符的逻辑赋值运算符

ES2020 引入了空值合并运算符，其也可以与赋值运算符结合使用。仅当 LHS 为 undefined 或仅为 null 时，才将 RHS 变量值赋给 LHS 变量。

	
// Logical Assignment Operator with ?? operator
let num1
let num2 = 10
num1 ??= num2
console.log(num1) // 10
num1 = false
num1 ??= num2
console.log(num1) // false
// Line 5 can also be written as following ways
// num1 ?? (num1 = num2)

// Logical Assignment Operator with ?? operator

let num1

let num2 = 10

num1 ??= num2

console.log(num1) // 10

num1 = false

num1 ??= num2

console.log(num1) // false

// Line 5 can also be written as following ways

// num1 ?? (num1 = num2)

数值分隔符

新引入的数值分隔符使用 _（下划线）字符，在数值组之间提供分隔，使数值读起来更容易。例如：

let number = 100_000 
console.log(number)
/**** Output ****/
// 100000

let number = 100_000

console.log(number)

/**** Output ****/

// 100000

Intl.ListFormat

ListFormat 对象带有两个参数，它们都是可选的。第一个参数是语言（语言环境），第二个参数是具有两个属性（样式和类型）的选项对象。

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

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

Intl.ListFormat 有一个称为 format() 的方法，该方法接收一个数组作为一个参数，并以特定于语言环境的方式对其进行格式化。

下面给出了一些示例，这些示例结合了不同的语言环境和选项。

const arr = ['Pen', 'Pencil', 'Paper']
let obj = new Intl.ListFormat('en', { style: 'short', type: 'conjunction' })
console.log(obj.format(arr)) 
/**** Output ****/
// Pen, Pencil, &amp; Paper
 
obj = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })
console.log(obj.format(arr)) 
/**** Output ****/
// Pen, Pencil, and Paper
 
obj = new Intl.ListFormat('en', { style: 'narrow', type: 'conjunction' })
console.log(obj.format(arr)) 
/**** Output ****/
// Pen, Pencil, Paper
 
// Passing in Italy language tag
obj = new Intl.ListFormat('it', { style: 'short', type: 'conjunction' })
console.log(obj.format(arr)) 
/**** Output ****/
// Pen, Pencil e Paper
 
// Passing in German language tag
obj = new Intl.ListFormat('de', { style: 'long', type: 'conjunction' })
console.log(obj.format(arr)) 
/**** Output ****/
// Pen, Pencil und Paper

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

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

console.log(obj.format(arr))

/**** Output ****/

// Pen, Pencil, & Paper

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

console.log(obj.format(arr))

/**** Output ****/

// Pen, Pencil, and Paper

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

console.log(obj.format(arr))

/**** Output ****/

// Pen, Pencil, Paper

// Passing in Italy language tag

obj = new Intl.ListFormat('it', { style: 'short', type: 'conjunction' })

console.log(obj.format(arr))

/**** Output ****/

// Pen, Pencil e Paper

// Passing in German language tag

obj = new Intl.ListFormat('de', { style: 'long', type: 'conjunction' })

console.log(obj.format(arr))

/**** Output ****/

// Pen, Pencil und Paper

dateStyle 和 timeStyle 选项

Intl.DateTimeFormat 对象是用来启用语言敏感的日期和时间格式的对象构造器。新提案的 dateStyle 和 timeStyle 选项可用于请求给定长度的，特定于语言环境的日期和时间。

下面是不同的选项和语言（区域设置）的一些示例：

// Time only with short format
let o = new Intl.DateTimeFormat('en' , { timeStyle: 'short' })
console.log(o.format(Date.now()))
// 11:27 PM
 
// Time only with medium format
o = new Intl.DateTimeFormat('en' , { timeStyle: 'medium'})
console.log(o.format(Date.now()))
// 11:27:57 PM
 
// Time only with long format
o = new Intl.DateTimeFormat('en' , { timeStyle: 'long' })
console.log(o.format(Date.now()))
// 11:27:57 PM GMT+11
 
// Date only with short format
o = new Intl.DateTimeFormat('en' , { dateStyle: 'short'})
console.log(o.format(Date.now()))
// 10/6/20
 
// Date only with medium format
o = new Intl.DateTimeFormat('en' , { dateStyle: 'medium'})
console.log(o.format(Date.now()))
// Oct 6, 2020
 
// Date only with long format
o = new Intl.DateTimeFormat('en' , { dateStyle: 'long'})
console.log(o.format(Date.now()))
// October 6, 2020

// Time only with short format

let o = new Intl.DateTimeFormat('en' , { timeStyle: 'short' })