什麼是空值合併運算子？

空值合併運算子是一種現代 JavaScript 的語法特性，它用於處理可能為 null 或 undefined 的值。與傳統的邏輯 OR（||） 運算子不同，空值合併運算子只會在值為 null 或 undefined 時返回默認值，而不會在其他偽值（例如空字串、0、false 等）的情況下觸發。

（||）運算子和（??）運算子處理空字串差異

|| 運算子處理空字串：

const userInput: string = '';
const storedData = userInput || 'DEFAULT';
console.log(storedData); // DEFAULT

?? 運算子處理空字串：

const userInput: string = '';
const storedData = userInput ?? 'DEFAULT';
console.log(storedData); // 不會輸出任何東西

如何使用空值合併運算子？

在實際應用中，我們經常會遇到需要處理使用者輸入、API 返回值或其他資料的情況。這些資料可能是空的、未定義的，或者包含其他偽值。透過 JavaScript 的空值合併運算子特性，我們可以更精確的處理這些情況。只需使用 ?? 運算子，將其置於可能為 null 或 undefined 的值之間，就能安全取得值或設定默認值。

const userInput1: string | null = null;
const storedData1 = userInput1 ?? 'DEFAULT';
console.log(storedData1); // storedData1 為 null，輸出 'DEFAULT'

const userInput2: string | null = '肉鬆';
const storedData2 = userInput2 ?? 'DEFAULT';
console.log(storedData2); // storedData2 不為 null，輸出 '肉鬆'

其他空值合併運算子的使用案例

JavaScript 空值合併運算子不僅適用於設定默認值，還可以用於其他情境，如處理函式返回值、物件屬性存取等。

處理函式返回值

function getUserData(): string | null {
  return null;
}

const user = getUserData() ?? { name: 'Guest' };
console.log(user); // getUserData() 返回 null，輸出 { name: 'Guest' }，反之，輸出 return 的字串值

物件屬性存取

const person = { name: null, age: 30 };
const chName = person.name ?? 'Unknown';
const age = person.age ?? 18;
console.log(chName); // person.name 為 null，輸出 'Unknown'，反之，輸出 person.name 的值
console.log(age); // person.age 不為 null，輸出 30，反之，輸出 18

本日重點

1. 空值合併運算子使用 ?? 表示，它被用於處理可能為 null 或 undefined 的值，並提供一個默認值，以確保我們始終有一個有效的值。
2. 空值合併運算子（??）與傳統 OR 運算子（||）不同。 OR 運算子在偽值（如空字串、0、false 等）情況下返回默認值，而空值合併運算子只在值為 null 或 undefined 時返回。

參考

• 空值合併運算子