论坛 › Web开发 › ECMAScript 2024 新特性解读

不二如是 发表于 2024-9-8 10:29:50

ECMAScript 2024 新特性解读

ECMAScript 2024（https://tc39.es/ecma262/2024/） 语言规范的最终版本于 6 月 26 日获得批准。

今天带大家一起来看一下 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<"ok" | "timed-out">; }

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('&#128512;') // true

// multiple codepoints emoji
pattern.test('&#129782;&#127998;') // true
v 模式的另一个特性是对字符串属性进行减法（--）、交集（&&）和并集运算。

一个值得注意的新特性是在字符类中使用 \q 来表示字符串字面量（多字符字符串）。

匹配除了 &#128169; 之外的所有表情符号：

const pattern = /[\p{RGI_Emoji}--\q{&#128169;}]/v;

pattern.test('&#128540;') // true
pattern.test('&#128169;') // false
仅限大写、十六进制数字安全字符：

const pattern = /[\p{Uppercase}&&\p{ASCII_Hex_Digit}]/v;

pattern.test('f') // true
pattern.test('F') // false
在 u 模式中，大小写敏感检查的工作方式很令人困惑。

当启用忽略大小写标志（i），并且以反向模式针对特定大小写组（Lowercase_Letter 或 Uppercase_Letter）时，结果并不直观。

新的 v 标志使结果更可预测，因此这两个标志不能组合在一起使用。

提案地址：https://github.com/tc39/proposal-is-usv-string

提案 4：ArrayBuffer transfer

这项功能主要是为了让我们更方便地调整 ArrayBuffer 的大小。

这个提案引入了一些新的方法，例如 transfer() 和 transferToFixedLength()，它们可以帮助我们在不同的位置之间转移字节。

这样我们就可以根据需要将数据迁移到目标位置。

另外，这个提案还引入了一个新的方法，叫做 detached getter。

这个方法的作用是检查已释放的缓冲区，它提供了一种原生的方式来判断一个缓冲区是否已经被释放。

const buffer = new ArrayBuffer();
buffer.detached; // false

const newBuffer = buffer.transfer();
buffer.detached; // true
提案地址：https://github.com/tc39/proposal-arraybuffer-transfer


提案 5：Array grouping

数组分组提案，一个由 Lodash、Ramda 和其他工具库广泛使用的 groupBy 方法现在已经成为 ECMAScript 的一部分。

最初的想法是将其实现为 Array.prototype.groupBy，但这与常用的 Sugar 工具冲突。

它被实现为 Object.groupBy / Map.groupBy 的静态方法。

const langs = [
   { name: "Rust", compiled: true, released: 2015 },
   { name: "Go", compiled: true, released: 2009 },
   { name: "JavaScript", compiled: false, released: 1995 },
   { name: "Python", compiled: false, released: 1991 },
];

const callback = ({ compiled }) => (compiled ? "compiled" : "interpreted");
const langsByType = Object.groupBy(langs, callback);

console.log({ langsByType });
// {
//   compiled: [
//   { name: "Rust", compiled: true, released: 2015 },
//   { name: "Go", compiled: true, released: 2009 }
//   ],
//   interpreted: [
//   { name: "JavaScript", compiled: false, released: 1995 },
//   { name: "Python", compiled: false, released: 1991 }
//   ]
// }
https://github.com/tc39/proposal-array-grouping

提案 6：Promise.withResolvers

**** Hidden Message *****



HTML5+CSS3课程：

https://www.bilibili.com/video/BV1QW411N762

JavaScript课程：

https://www.bilibili.com/video/BV1dG411B7nG

zhangchenyvn 发表于 2024-9-8 11:14:24

感谢分享

某一个“天” 发表于 2024-9-8 13:09:02

感谢分享{:10_256:}{:10_256:}

liuhongrun2022 发表于 2024-9-8 18:03:11

感谢分享

sunshine_8205 发表于 2024-9-8 21:09:28

感谢分享

不二如是 发表于 2024-9-8 21:13:41

sunshine_8205 发表于 2024-9-8 21:09
感谢分享

{:10_329:}

不二如是 发表于 2024-9-29 09:33:15

感谢分享

查看完整版本: ECMAScript 2024 新特性解读