ECMAScript 2021

也就是 ES12

目录

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

String.prototype.replaceAll

前端 or node 玩家通常会遇到一些需求, 匹配更换掉字符串中的一些字段, 如果仅替换一个字符串中某模式（pattern）的首个实例, 直接 str.replace(reg, ‘xx’); 但是如果需要匹配符合规则的所有项, 唯一的方式就是使用全局匹配 g;

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

test''

Promise.any

ES2021 将引入 Promise.any() 方法,如果 promise 列表或数组中首个 resolve 的 promise(尽管某个 promise 的 reject 早于另一个 promise 的 resolve, Promise.any() 仍将返回那个首先 resolve 的 promise), ,这样就会短路并返回一个值。如果所有 promise 都被 reject ,该方法则将抛出一个聚合的错误信息 （AggregateError: All promises were rejected）。

⚠️ 和 Promise.race()的区别是 之处在于,Promise.race()在某个 promise 率先 resolve 或 reject 后都会短路。

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("p1");
  }, 200);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("p2");
  }, 300);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("p3");
  }, 100);
});

Promise.any([p1, p2, p3]).then((res) => {
  console.log(res); // p3
});

逻辑操作符和赋值表达式

在新提案里，将有能力结合逻辑操作符和赋值表达式。&&、 || 和 ?? 的一些 demo

&& 逻辑赋值操作符

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

let num1 = 1;
let num2 = 2;
num1 &&= num2; // 或者num1 && (num1 = num2) if(num1) num1 = num2
console.log(num1); // 2

|| 逻辑赋值操作符

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

let num1;
let num2 = 2;
num1 ||= num2;

console.log(num1); // 2

?? 逻辑赋值操作符

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

let num1;
let num2 = 2;
num1 ??= num2;
console.log(num1); // 2

数值分隔符

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

let num = 100_000;
console.log(num); // 100000

Intl.ListFormat

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

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

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

const arr = ["Pen", "Pencil", "Paper"];
let obj = new Intl.ListFormat("en", { style: "short", type: "conjunction" });
console.log(obj.format(arr));

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

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

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

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

test''

Intl.DateTimeFormat 的 dateStyle 和 timeStyle 选项

Intl.DateTimeFormat 对象是一个支持语言敏感日期和时间格式化的构造器。拟议的 dateStyle 和 timeStyle 选项可被用于获取一个 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