TypeScript 中的空值合併運算符
在本文中，我們將解釋 TypeScript 中的空值合併運算符。
YouTube Video
TypeScript 中的空值合併運算符
TypeScript 中的空值合併運算符（??）類似於 JavaScript 的短路求值，但更明確地用於僅在左側為 null 或 undefined 時提供後備值。此運算符可讓您輕鬆檢查一個值是否為 null 或 undefined，並根據需要設置默認值。
空值合併運算符（??）僅在左側為 null 或 undefined 時返回右側值。這允許將 false、空字串或數字 0 等值保持其本身進行評估。這是與傳統邏輯 OR 運算符 (||) 的一個重大區別。此運算符是在 TypeScript 3.7 中引入的。
基本語法
基本語法如下：。
1let result = value ?? defaultValue;value是檢查是否為null或undefined的目標值。defaultValue是當value為null或undefined時返回的值。
範例用法
1function getUserName(userName: string | null | undefined): string {
2 return userName ?? "Default User";
3}
4
5console.log(getUserName("Alice")); // Output: Alice
6console.log(getUserName(null)); // Output: Default User
7console.log(getUserName(undefined)); // Output: Default User
在此，如果 userName 為 null 或 undefined，函數 getUserName 返回 "Default User"，否則返回 userName 的值。
與邏輯 OR 運算符的不同
空值合併運算子 與 邏輯或運算子 之間存在一個重要的差異。邏輯 OR 運算符將 false、0 和 ""（空字串）等值與 null 和 undefined 一樣視為“假值”。另一方面，空值合併運算符僅使用 null 和 undefined 作為後備判定條件。
邏輯 OR 運算符的示例
1function getUserAge(age: number | null | undefined): number {
2 return age || 18; // `0` also applies the default value
3}
4
5console.log(getUserAge(25)); // Output: 25
6console.log(getUserAge(0)); // Output: 18
7console.log(getUserAge(null)); // Output: 18
- 如上所示，即使值為
0，邏輯或運算子仍然返回預設值18。
空值合併運算符的示例
1function getUserAge(age: number | null | undefined): number {
2 return age ?? 18; // `0` does not apply the default value
3}
4
5console.log(getUserAge(25)); // Output: 25
6console.log(getUserAge(0)); // Output: 0
7console.log(getUserAge(null)); // Output: 18
-
另一方面，空值合併運算子在值是
0時，會返回原始值。 -
選擇使用邏輯或運算子還是空值合併運算子取決於是否可以接受
0或空字串。例如，如果您希望將用戶的年齡保留為0，則需要使用空值合併運算符。
與類型的結合
您可以通過將 TypeScript 的類型安全性與空值合併運算符結合使用來提升代碼的穩健性。在以下範例中，當某些屬性為 null 或 undefined 時，將使用默認值。
1interface User {
2 name: string;
3 age?: number | null;
4}
5
6function displayUserInfo(user: User): string {
7 const userName: string = user.name;
8 const userAge: number = user.age ?? 18;
9 return `Name: ${userName}, Age: ${userAge}`;
10}
11
12const user1: User = { name: "John", age: null };
13const user2: User = { name: "Doe" };
14
15console.log(displayUserInfo(user1)); // Output: Name: John, Age: 18
16console.log(displayUserInfo(user2)); // Output: Name: Doe, Age: 18
- 在
User介面中，age屬性可以是數字、null或undefined，因此使用空值合併運算子將預設值設為18。 - 同時，
name屬性只允許string，因此直接使用該值。
總結
- 空值合併運算符僅在值為
null或undefined時幫助設置默認值。與傳統的邏輯或運算子不同，它不會將false、0或空字串視為「假值」，在需要保留這些值時特別有用。此外，將其與 TypeScript 的類型系統結合使用可以創建更強健且可讀性更高的代碼。 - 通過有效使用 Nullish 合併運算符，可以簡潔地編寫設定默認值的邏輯，同時減少不必要的
null檢查。
TypeScript 中的 Nullish 合併賦值運算符
Nullish 合併賦值運算符（??=）是 TypeScript 中引入的一個新運算符，提供了一種僅當變數為 null 或 undefined 時賦值的便捷方法。在這裡，我們將解釋此運算符的工作原理、適用情況，並提供代碼示例。
什麼是 Nullish 合併賦值運算符
空值合併賦值運算符是一種基於空值合併運算符的賦值運算符。此運算符用於僅當變數為 null 或 undefined 時賦予新值。
1let variable: string | null = null;
2variable ??= "Default Value"; // The variable is null,
3 // so the new value is assigned
4
5console.log(variable); // Output: "Default Value"
通過使用這個運算符，可以更簡潔地編寫「當變數為 undefined 或 null 時賦值」的邏輯。
與傳統賦值方法的比較
如果沒有空值合併賦值運算符，您需要使用 if 語句或三元運算符才能實現相同的行為。讓我們與傳統賦值方法進行比較。
傳統方法
使用 if 語句，可以寫成如下：。
1let variable: string | null | undefined = null;
2if (variable === null || variable === undefined) {
3 variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"
使用三元運算子的方式
或者，使用三元運算子，可以寫成如下：。
1let variable: string | null | undefined = undefined;
2variable = variable != null ? variable : "Default Value";
3// != null checks for both null and undefined
4// (intentional loose equality comparison)
5
6console.log(variable); // Output: "Default Value"
使用空值合併賦值運算子的一種簡潔方法
另一方面，使用空值合併賦值運算子，可以寫成如下：。
1let variable: string | null = null;
2variable ??= "Default Value";
3console.log(variable); // Output: "Default Value"
如上所示，與其他賦值方法相比，空值合併賦值運算子更簡單且可讀性更高，有助於提高程式碼的清晰度。
使用 ??= 的具體示例
空值合併賦值運算符在多種場合都很有用，例如初始化對象屬性和設置默認值。以下是一些具體示例。
物件屬性初始化
1interface Config {
2 theme?: string;
3 language?: string;
4}
5
6let config: Config = {};
7config.theme ??= "light"; // Set the default "light" theme if none is specified
8config.language ??= "en"; // Set the default "en" language if none is specified
9
10console.log(config); // Output: { theme: "light", language: "en" }
陣列初始化
1let numbers: number[] | null = null;
2numbers ??= []; // Assign an empty array if numbers is null
3
4numbers.push(1);
5console.log(numbers); // Output: [1]
為函式參數設置預設值
1function greet(name?: string) {
2 name ??= "Guest"; // Set name to "Guest" if it is undefined or null
3 console.log(`Hello, ${name}!`);
4}
5
6greet(); // Output: "Hello, Guest!"
7greet("Alice"); // Output: "Hello, Alice!"
注意事項與限制
空值合併賦值運算符非常有用，但也有一些注意事項。
僅針對 null 和 undefined。。
1let str: string | null = "";
2str ??= "Default";
3console.log(str); // Output: "" (remains an empty string)
4
5let num: number | undefined = 0;
6num ??= 100;
7console.log(num); // Output: 0 (remains 0)
- 這個運算子僅在值是
null或undefined時執行賦值。例如，像空字串（""）、0或false等值不會被作為目標。
與其他運算子結合使用時需小心。。
1let value: string | null = null;
2
3// Targets not only "null" and "undefined" but also falsy values
4value ||= "Default";
5console.log(value); // Output: "Default"
6
7value = "";
8// An empty string is also targeted
9value ||= "Default";
10console.log(value); // Output: "Default"
11
12value = null;
13// Targets only null or undefined
14value ??= "Default";
15console.log(value); // Output: "Default"
- 空值合併賦值運算子可能在與其他運算子結合使用時產生意料之外的結果。特別需要理解它與邏輯 OR 賦值運算符之間的區別。
範例代碼
1let config: { theme?: string; language?: string } = {};
2
3// Use Nullish Coalescing Assignment to set default values
4config.theme ??= "light";
5config.language ??= "en";
6
7console.log(config); // Output: { theme: "light", language: "en" }
8
9let list: number[] | null = null;
10list ??= [];
11list.push(42);
12
13console.log(list); // Output: [42]
- 通過使用空值合併賦值運算符，您可以消除不必要的代碼，編寫更流暢、更優雅的 TypeScript 代碼。
總結
空值合併賦值運算子（??=）是 TypeScript 中既簡單又高效的賦值運算之一。當需要檢查 null 或 undefined 並設置預設值時，它特別實用。與傳統的 if 語句或三元運算子相比，程式碼變得更簡潔且更具可讀性。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。