JavaScript 2024 的 6 個新功能

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

我們一起來看看吧！

01、格式正確的 Unicode 字符串

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

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

實際使用

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

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

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

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

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

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

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

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

02、Atomic waitSync

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

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

同步示例

在 Web Worker 中執(zhí)行繁重計算或?qū)崟r數(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ù)雜且容易出錯的消息傳遞或輪詢機制，從而增強了 JavaScript 的并發(fā)模型。

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

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

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

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

高級搜索

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

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

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

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

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

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

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

04、Pipeline Operator (|>)

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

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

例子

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

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

05、Temporal API

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

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

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

使用中的Temporal API

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

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

      
        
          // 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 對象的巨大改進，因為它為開發(fā)人員提供了更直觀、更強大的工具集，用于日期和時間操作的各個方面。

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

06、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ù)不會意外更改，這在函數(shù)式編程和管理應(yīng)用程序狀態(tài)時特別有用。

例子

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

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

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

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

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

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

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

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

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

寫在最后

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

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

學(xué)習(xí)更多技能

請點擊下方公眾號