在 TypeScript 中，合并運算符（??） 是一種邏輯運算符，用于在變量為 null 或 undefined 時提供默認值。它讓代碼在處理“空值”場景時更加簡潔、清晰、可預測。

一、語法說明

合并運算符由兩個問號組成：

變量 ?? 默認值

該運算符的邏輯是：如果左側的值是 null 或 undefined，則返回右側的默認值；否則返回左側的值本身。

?? 注意：與邏輯或運算符（||）不同，??不會將 0、false 或空字符串 "" 視為“空值”。

二、實用示例

示例 1：函數(shù)中的默認值設置

以下函數(shù)通過 Nullish 合并運算符為 input 參數(shù)設置了默認值 100：

function displayValue(input?: number) {
  const value = input ?? 100;
  console.log(value);
}
displayValue();     // 輸出 100
displayValue(50);   // 輸出 50

在 displayValue() 中未傳入?yún)?shù)，input 是 undefined，因此使用了默認值 100。而在傳入 50 時，使用的是實際值。

示例 2：對象屬性默認值設置（常用于 JSON）

當從 JSON 或其他外部數(shù)據(jù)源獲取對象時，某些字段可能缺失?？梢允褂??? 為這些屬性設定默認值。

interface Settings {
  volume?: number;
  brightness?: number;
}
const userSettings: Settings = {
  volume: 0
};
const volume = userSettings.volume ?? 50;
const brightness = userSettings.brightness ?? 75;
console.log(`Volume: ${volume}`);         // 輸出 Volume: 0
console.log(`Brightness: ${brightness}`); // 輸出 Brightness: 75

volume 的值為 0，雖然是假值，但不是 null 或 undefined，因此不會使用默認值 50。
brightness 沒有定義，因此使用了默認值 75。

三、瀏覽器支持情況

Nullish 合并運算符在大多數(shù)現(xiàn)代瀏覽器中已經(jīng)得到支持：

• ? Google Chrome 80+
• ? Microsoft Edge 80+
• ? Firefox 72+
• ? Safari 13.1+
• ? Opera 67+

?? TypeScript 會將 ?? 編譯為兼容 JavaScript 語法，確保在較老環(huán)境中依然可運行（需配置合適的編譯目標）。

四、總結

合并運算符（??）是 TypeScript 中處理 null 與 undefined 值的利器，特別適合用于：

• 函數(shù)參數(shù)默認值
• 對象屬性默認值
• 用戶配置合并

它使得代碼更加健壯，避免不必要的類型判斷。是開發(fā)現(xiàn)代前端和后端應用時不可或缺的一部分。

如果你正在使用 TypeScript 開發(fā)項目，建議立刻開始使用 ?? 運算符，讓你的代碼更簡潔，更可控！

到此這篇關于TypeScript 中合并運算符??的文章就介紹到這了,更多相關TypeScript 合并運算符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論