JavaScript 在2024 年更新引入了 6個(gè)關(guān)鍵功能。從使文本和日期更易于處理，到程序等待和協(xié)同工作的新方法，甚至使模式更容易查找。

我們一起來看看吧！

1、格式正確的 Unicode 字符串

格式良好的 Unicode 字符串引入了確保 JavaScript 中的字符串以 UTF-16 編碼正確格式化的方法。

此功能旨在改進(jìn) JavaScript 處理 Unicode 的方式，通過檢測和糾正字符串中不正確配對的代理代碼點(diǎn)，使其更輕松地處理其他語言和字符。

實(shí)際使用

想象一下，您正在處理用戶生成的內(nèi)容，其中可能包含各種語言和符號。

確保該內(nèi)容正確編碼對于正確處理和顯示它至關(guān)重要。

01）檢查格式良好的 Unicode 字符串：使用 String.prototype.toWellFormed 確定字符串是否在沒有任何單獨(dú)代理的情況下正確編碼。

const exampleString = "Example with Unicode ??";
console.log(exampleString.isWellFormed()); // True if no lone surrogates are present

02）轉(zhuǎn)換為格式良好的 Unicode 字符串：通過使用 String.prototype.toWellFormed 將這些代理項(xiàng)替換為 Unicode 替換字符 (U+FFFD)，將任何具有不成對代理項(xiàng)的字符串轉(zhuǎn)換為格式良好的字符串。

const malformedString = "Example with a lone surrogate \uD800";
console.log(malformedString.toWellFormed()); // "\uD800" is replaced with U+FFFD

此功能簡化了 Unicode 字符串的管理，特別是在處理國際化或表情符號時(shí)，確保開發(fā)人員能夠跨不同平臺(tái)和環(huán)境更可靠地處理字符串。

它解決了 Web 應(yīng)用程序中常見的錯(cuò)誤來源，使 JavaScript 在處理全局內(nèi)容方面更加穩(wěn)健。

2、Atomic waitSync

Atomic waitSync 是一個(gè)同步原語，它補(bǔ)充了現(xiàn)有的 Atomics API。

它允許在共享內(nèi)存位置上進(jìn)行同步等待，從而促進(jìn)主線程和工作線程之間更好的協(xié)調(diào)，這在復(fù)雜的多線程 Web 應(yīng)用程序中至關(guān)重要。

同步示例

在 Web Worker 中執(zhí)行繁重計(jì)算或?qū)崟r(shí)數(shù)據(jù)處理的 Web 應(yīng)用程序中。

有效地協(xié)調(diào)主線程與工作線程是保持性能和數(shù)據(jù)完整性的關(guān)鍵。

// Assuming a shared Int32Array buffer
const sharedBuffer = new SharedArrayBuffer(1024);
const intArray = new Int32Array(sharedBuffer);


// Main thread sets a value
Atomics.store(intArray, 0, 123);


// Worker thread waits synchronously for the value to change
Atomics.waitSync(intArray, 0, 123);


// After some operations in the worker
Atomics.store(intArray, 0, 456); // Changes the shared memory value


// Main thread can be notified or act upon this change

Atomic waitSync 提供了一種更直接的方法來同步主線程和 Web Worker 之間的操作，而無需訴諸復(fù)雜且容易出錯(cuò)的消息傳遞或輪詢機(jī)制，從而增強(qiáng)了 JavaScript 的并發(fā)模型。

它可以顯著提高依賴并行處理的應(yīng)用程序的性能和可靠性。

3、正則表達(dá)式 v 帶有集合表示法的標(biāo)志 + 字符串屬性

v 標(biāo)志的引入以及正則表達(dá)式 (RegEx) 中字符串的集合表示法和屬性的引入代表了 JavaScript 模式匹配功能的顯著改進(jìn)。

此功能為 RegEx 提供了更具表現(xiàn)力和更有效的語法，簡化了基于復(fù)雜模式的匹配和替換文本的過程，這對于涉及國際化和多語言內(nèi)容的任務(wù)特別有益。

高級搜索

v 標(biāo)志與集合表示法和字符串屬性的組合允許創(chuàng)建可以匹配特定字符集（包括由 Unicode 屬性定義的字符集）的正則表達(dá)式。

此增強(qiáng)功能對于需要支持多種語言和不同字符集的應(yīng)用程序特別有用。

匹配空白或表情符號：v 標(biāo)志允許在集合表示法中使用 Unicode 屬性轉(zhuǎn)義，從而允許對廣泛的字符類別（例如表情符號或空白字符）進(jìn)行精確匹配。

const regex = new RegExp("[\\p{Emoji}\\p{White_Space}]", "v");

用法示例：針對包含表情符號和空格的字符串測試正則表達(dá)式，展示了準(zhǔn)確識別這些字符類型的能力。

const testString = "Here is an emoji ?? and some spaces";
console.log(testString.match(regex)); // Expected to match the emoji and spaces

RegExp 的這一增強(qiáng)功能使得處理復(fù)雜字符集更加直觀且不易出錯(cuò)，特別是在處理需要適應(yīng)各種語言和符號的全局應(yīng)用程序時(shí)。

4、Pipeline Operator (|>)

Pipeline Operator 引入了一種更具可讀性和功能性的方式來在 JavaScript 中編寫操作序列。

它允許開發(fā)人員以比嵌套函數(shù)調(diào)用更直觀、更清晰的方式將函數(shù)鏈接在一起，從而提高代碼的易讀性和可維護(hù)性，特別是在數(shù)據(jù)處理或函數(shù)式編程上下文中。

例子

考慮一個(gè)場景，您需要對一個(gè)值應(yīng)用多個(gè)轉(zhuǎn)換。使用 Pipeline Operator，每個(gè)步驟都清晰分開，使代碼更易于理解。

// Example functions that could be used in a pipeline
const double = n => n * 2;
const increment = n => n + 1;


// Using the Pipeline Operator to apply the functions
let result = 5 |> double |> increment;


console.log(result); // Outputs 11
The Pipeline Operator represents a significant step towards a more functional programming style within JavaScript.

提供的語法解決方案不僅更具表現(xiàn)力，而且符合現(xiàn)代 JavaScript 開發(fā)的可讀性和組合目標(biāo)。

5、Temporal API

Temporal API 解決了 JavaScript 中日期和時(shí)間操作的復(fù)雜性和不一致問題。

通過提供大量用于處理日期、時(shí)間、時(shí)區(qū)和持續(xù)時(shí)間的對象和方法，Temporal API 簡化了與時(shí)間相關(guān)的數(shù)據(jù)的處理。

通過這種方式，其目標(biāo)是用強(qiáng)大的標(biāo)準(zhǔn)解決方案取代對第三方庫的需求。

使用中的Temporal API

使用日期和時(shí)間通常涉及處理時(shí)區(qū)、夏令時(shí)更改和格式設(shè)置。

Temporal API 使這些任務(wù)更加簡單且不易出錯(cuò)。

// Creating a date-time object in a specific timezone
const meetingDate = Temporal.PlainDateTime.from("2024-03-25T15:00:00");
const zonedDate = meetingDate.withTimeZone("America/New_York");


console.log(zonedDate.toString()); // "2024-03-25T15:00:00-04:00[America/New_York]"


// Calculating the difference between two dates
const startDate = Temporal.PlainDate.from("2024-01-01");
const endDate = Temporal.PlainDate.from("2024-03-01");
const difference = startDate.until(endDate);


console.log(difference.toString()); // "P2M" (Period of 2 Months)

此功能是對現(xiàn)有 Date 對象的巨大改進(jìn)，因?yàn)樗鼮殚_發(fā)人員提供了更直觀、更強(qiáng)大的工具集，用于日期和時(shí)間操作的各個(gè)方面。

它極大地增強(qiáng)了 JS 應(yīng)用程序中處理時(shí)態(tài)數(shù)據(jù)時(shí)的開發(fā)體驗(yàn)。

6、Records and Tuples

Records and Tuples被提議作為 JavaScript 中新的、不可變的數(shù)據(jù)結(jié)構(gòu)，旨在提高代碼的可靠性和簡單性。

Records允許您創(chuàng)建不可變的鍵值對，類似于對象，但創(chuàng)建后無法更改。

Tuples是不可變的有序列表，類似于數(shù)組，但在創(chuàng)建后也無法更改。

這些結(jié)構(gòu)確保數(shù)據(jù)不會(huì)意外更改，這在函數(shù)式編程和管理應(yīng)用程序狀態(tài)時(shí)特別有用。

例子

讓我們探討如何在用戶配置文件管理場景中應(yīng)用記錄和元組，以在整個(gè)應(yīng)用程序生命周期中保持?jǐn)?shù)據(jù)完整性。

使用記錄創(chuàng)建不可變的用戶配置文件：

使用記錄將用戶配置文件定義為不可更改的鍵值對，確保用戶配置文件一旦設(shè)置就無法更改，從而保持?jǐn)?shù)據(jù)完整性。

const userProfile = #{
  name: "Jane Doe",
  age: 28,
};

使用元組管理有序數(shù)據(jù)：

實(shí)現(xiàn)元組來處理數(shù)據(jù)序列，例如點(diǎn)或坐標(biāo)，這些數(shù)據(jù)一旦初始化就保持不變，從而消除了意外修改的風(fēng)險(xiǎn)。

const points = #[1, 2, 3];

此外，它們在應(yīng)用程序執(zhí)行過程中對數(shù)據(jù)狀態(tài)提供一定程度的保證，防止意外突變引起的錯(cuò)誤。

它們在具有復(fù)雜狀態(tài)管理需求或采用函數(shù)式編程模式的應(yīng)用程序中特別有用。

寫在最后

這些計(jì)劃在 ECMAScript 2024 中發(fā)布的功能不僅好，而且非常好。它們是實(shí)現(xiàn) JavaScript 現(xiàn)代化、使其更加強(qiáng)大并改善開發(fā)人員體驗(yàn)的重要步驟。

通過記錄和元組解決數(shù)據(jù)完整性問題，并通過增強(qiáng)模式匹配解決代碼可讀性問題，ES15 將為開發(fā)人員提供編寫更高效、可靠和可維護(hù)的應(yīng)用程序所需的工具。