【第3370期】ECMAScript 2024 新特性解读！

前言

介绍了 ECMAScript 2024 中新增的几项重要特性，包括字符串格式校验、异步原子等待、正则表达式的新功能、ArrayBuffer 的转移操作、数组分组以及 Promise 的新方法。今日前端早读课文章由 @ConardLi 分享，公号：code 秘密花园授权。

正文从这开始～～

ECMAScript 2024（https://tc39.es/ecma262/2024/） 语言规范的最终版本于 6 月 26 日获得批准。今天带大家一起来看一下这个版本新增了哪些走进标准的提案。

【第3203期】ECMAScript 2024（ES15）将带来的新特性

提案 1：Well-Formed Unicode Strings

JavaScript 中的字符串由一系列 UTF-16 编码点表示。名称中的 16 表示可用于存储编码点的位数，提供了 65536 个可能的组合（216）。这个数量足以存储拉丁、希腊、斯拉夫和东亚文字的字符，但不足以存储中文、日文和韩文表意文字或表情符号等内容。额外的字符以 16 位代码单元的形式存储，称为代理对（surrogate pairs）。

 'a'.length
 // 1
 'a'.split('')
 // [ 'a' ]

 '🥑'.length
 // 2
 '🥑'.split('')
 //[ '\ud83e', '\udd51' ] 👈 surrogate pair

在 UTF-16 编码中，前导和尾随代理对的范围是为了避免对单个代码单元字符进行编码的歧义。如果一个代理对缺少前导或尾随代码单元，或者它们的顺序颠倒了，我们将处理一个 “孤立代理对”，整个字符串将成为 “格式错误”。为了使字符串 “格式良好”，它不能包含孤立的代理对。

《Well-Formed Unicode Strings》提案引入了一个 String.prototype.isWellFormed() 方法，用于验证字符串是否格式良好。此外，还提供了一个 String.prototype.toWellFormed() 辅助方法，它将所有孤立的代理对替换为替代字符（U+FFFD, �）。

 '\ud83e\udd51'
 // 🥑

 '\ud83e\udd51'.isWellFormed()
 // true

 '\ud83e'.isWellFormed() // without trailing surrogate
 // false

 '\ud83e'.toWellFormed()
 // �

提案 2：Asynchronous atomic wait for ECMAScript

Workers 在 JavaScript 中实现了多线程。共享内存（SharedArrayBuffer）是一个底层 API，允许我们在主线程和工作线程之间共享内存进行操作。Atomics 对象上的一组静态方法可以帮助我们避免读写冲突。

常见的操作是将工作线程置于休眠状态，并在需要时唤醒它。我们可以结合使用 Atomics.wait() 和 Atomics.notify() 方法来实现此操作。然而，这种方法有一些限制，因为 Atomics.wait() 是一个同步 API，不能在主线程上使用。

《Asynchronous atomic wait》提案提供了一种异步方式来实现此操作，最重要的是，它可以在主线程上进行。

 // main thread
 let i32a = null;

 const w = new Worker("worker.js");
 w.onmessage = function (env) {
   i32a = env.data;
 };

 setTimeout(() => {
   Atomics.store(i32a, 0, 1);
   Atomics.notify(i32a, 0);
 }, 1000);

 // worker thread
 const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT);
 const i32a = new Int32Array(sab);
 postMessage(i32a);

 const wait = Atomics.waitAsync(i32a, 0, 0);
 // { async: false; value: "not-equal" | "timed-out"; }
 // or
 // { async: true; value: Promise; }

 if (wait.async) {
   wait.value.then((value) => console.log(value));
 } else {
   console.log(wait.value);
 }

提案地址：https://github.com/tc39/proposal-atomics-wait-async

提案 3：RegExp v flag with set notation + properties of strings

新的 RegExp v 标志类似于 2015 年添加的支持 Unicode 的正则表达式（u 标志），但功能更加强大。由于与 u 标志的相似性和一些不兼容性，这两个标志不能组合使用。新的 v 正则模式包含了三个功能：对一组 Unicode 字符串属性进行检查，执行减法 / 交集 / 并集匹配，并改善不区分大小写的匹配。

 // `u`和`v`模式相似，但不能组合使用
 const pattern = /./vu;
 // SyntaxError: Invalid regular expression: invalid flags

提案地址：https://github.com/tc39/proposal-regexp-v-flag

Unicode 标准定义了一组属性，可以简化正则表达式模式的编写。例如：

• /\p{Math}/u 用于检查数学运算符

• /\p{Dash}/u 用于检查破折号标点符号

• /\p{ASCII_Hex_Digit}/u 用于检查用于表示十六进制数字的符号

 const patternMath = /\p{Math}/u;
 const patternDash = /\p{Dash}/u;
 const patternHex = /\p{ASCII_Hex_Digit}/u;

 patternMath.test('+'); // true
 patternMath.test('z'); // false

 patternDash.test('-'); // true
 patternDash.test('z'); // false

 patternHex.test('f'); // true
 patternHex.test('z'); // false

大多数属性适用于单个字符编码点，但有一些属性，比如 Basic_Emoji、RGI_Emoji 和 RGI_Emoji_Flag_Sequence（以此类推），适用于字符串（多个字符编码点）。

目前，这些类型在 u 模式下不支持，尽管有一些讨论可以改变这种情况。幸运的是，在 v 模式下，我们可以使用 Unicode 字符串属性进行检查。

 const pattern = /\p{RGI_Emoji}/u
 // SyntaxError: Invalid regular expression: /\p{RGI_Emoji}/u: Invalid property name

 const pattern = /\p{RGI_Emoji}/v;

 // single codepoint emoji
 pattern.test('😀') // true

 // multiple codepoints emoji
 pattern.test('🫶🏾') // true

v 模式的另一个特性是对字符串属性进行减法（ -- ）、交集（ && ）和并集运算。一个值得注意的新特性是在字符类中使用 \q 来表示字符串字面量（多字符字符串）。

匹配除了 💩 之外的所有表情符号：

 const pattern = /[\p{RGI_Emoji}--\q{💩}]/v;

 pattern.test('😜') // true
 pattern.test('💩')