了解 JavaScript 空合併運算子 (??)-js教程-PHP中文網

空合併運算子 (??) 是 JavaScript 中的一項功能，在 ECMAScript 2020 中引入。使用此運算符，您可以處理可能為 null 或未定義的變數的預設值。

在引入之前，邏輯或運算符 (||) 通常用於此目的，但它並不總是合適，因為它處理所有虛假值。這？？運算符提供了更精確、更清晰的替代方案。

在本文中，您將了解空合併運算子的概念、其優點、如何使用它以及一些範例。

讓我們直接開始吧！？

什麼是空合併運算子 (??)？

空值合併 (??) 運算子是一個邏輯運算符，用於檢查值是否為 null 或未定義。

如果其左側操作數為 null 或未定義，則傳回其右側操作數（後備值）。

如果其左側運算元不為 null 或未定義，則傳回左側運算元。

例如：

let userInput = null;
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: default

登入後複製

在此範例中，userInput 為 null，因此 ??運算子傳回後備值「default」。

現在，您可能會想它與邏輯 OR || 有什麼不同？運算符??

這與邏輯OR || 不同運算符，因為||如果左側運算元是任何假值（如false、0、''、NaN 等），而不僅僅是null 或未定義，則運算符傳回右側操作數。而??運算子僅關注 null 或未定義。

為什麼使用空合併 (??) 運算子而不是邏輯 OR (||) 運算子？

??運算子只專注於 null 和未定義的值，而 ||運算子檢查所有虛假值（如 false、0、''、NaN 等），這可能會導致意外結果。

例如：

let obj = {};
let value = obj.age ?? 'default value';
console.log(value); // Output: default value

登入後複製

在此範例中，物件中未定義年齡，因此 ??運算子傳回後備值「預設值」。

現在，讓我們再舉一個例子來更好地理解這一點。

let userInput = '';
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: <empty string>

登入後複製

在此範例中，userInput 是一個空字串，它是一個假值，而不是 null 或未定義，因此 ??運算子傳回。

現在讓我們看看如果使用 || 會發生什麼而不是 ??.

let userInput = '';
let inputValue = userInput || 'default';
console.log(inputValue); // Output: default

登入後複製

這裡，||運算子傳回預設值，因為它會檢查任何虛假值。

使用 ?? 的另一個原因而不是||運算子是可讀性的。

程式碼使用??通常更清晰、更具可讀性，因為它的目的與處理 null 和 undefined 直接相關。當變數為 null 或未定義時，它提供後備值，使程式碼更具可讀性且不易出錯。

空運算子 ??使用邏輯運算子 AND/OR

您也可以使用 ??運算子與其他邏輯運算子一起檢查多個條件。

例如：

let userInput = null;
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: default

登入後複製

在此範例中，inputValue 取得值“default”，因為左側運算元 (userInput) 為 null。

現在讓我們看看如果 userInput 不為 null 會發生什麼事。

let obj = {};
let value = obj.age ?? 'default value';
console.log(value); // Output: default value

登入後複製

Understanding JavaScript Nullish Coalescing Operator (??)

哎呀！！這會引發錯誤？？

但是為什麼會發生這種事？

發生這種情況是因為空合併運算子 (??) 不能直接在 || 等邏輯運算子中使用OR 和 && AND 周圍沒有適當的括號。

這是因為 JavaScript 對運算子優先權有特定的規則，它指的是不同運算子的優先權，也就是運算的計算順序。

例如：??優先權低於||和 &&，因此將其放在括號內可確保首先在邏輯表達式中對其求值。

那麼正確的使用方法是??直接使用邏輯運算子：

let userInput = '';
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: <empty string>

登入後複製

這裡，括號強制 JavaScript 計算 ??先進行運算，然後將結果與 'alternative' 進行邏輯或運算。

結論

在 JavaScript 中，空值合併運算子 (??) 提供了一種更清晰一致的方式來處理 null 和未定義的預設值。它避免了 || 的陷阱運算子不傳回意外的假值。使用 Nullish Coalescing Operator (??) 可以使您的程式碼更乾淨、更具可讀性且不易出錯，尤其是在涉及可選值時。理解和使用空合併運算子 (??) 可以產生更有效率且可維護的程式碼。

今天就這些。

希望對您有幫助。

感謝您的閱讀。

這裡還有 45 個針對開發人員的 JavaScript 提示和技巧。

欲了解更多這類內容，請點擊此處。

在 X(Twitter) 上追蹤我，取得日常 Web 開發技巧。

繼續編碼！！

Understanding JavaScript Nullish Coalescing Operator (??)