Nullish Coalescing Operator介紹

語法

在JavaScript中，??是一個邏輯運算子，被稱為 Nullish Coalescing Operator（空值合併運算子）。

這個運算子在ES2020中被引入，以下是一些重要的知識點：

1. 基本使用：??運算子用於檢查其左邊的運算元是否為null或undefined。
   如果是，則返回其右邊的運算元。
   否則，返回左邊的運算元。
   例如，let result = a ?? b; 如果 a 是null或undefined，則 result 的值將是 b。
   
2. 與||運算子的區別：??和||運算子在功能上有些相似，但有一個重要的區別。
   ||運算子會在其左邊的運算元為falsy
   （例如：0，’ ‘(空字串)，NaN，false，null，undefined）時返回右邊的運算元。
   而??僅在其左邊的運算元為null或undefined時返回右邊的運算元。
   這意味著，如果你希望保留0或空字串等falsy值，應該使用??。
   
3. 與其他運算子的結合：??運算子的優先級低於大多數其他運算子，包括=和+。
   如果你想在表達式中混合使用??和其他運算子，最好使用括號來明確地指定優先級。
   例如，let result = a ?? b || c; 不等於 let result = (a ?? b) || c;。
4. 不允許與&&或||混合使用：由於歷史原因，JavaScript禁止使用??與||或&&混合使用，除非明確地使用括號來指定優先級。例如，你不能寫 a ?? b || c，但可以寫 (a ?? b) || c。

整理

1. 基本使用：?? 是一種檢查器，左邊是被檢查者，右邊是替代者。如果左邊的值消失（null或undefined），就用右邊的值來代替。
2. 與 || 的區別：?? 是一個選擇性更強的檢查器，只有在左邊的值真的消失（null或undefined）時才會選擇右邊，而 || 是一個寬鬆的檢查器，只要左邊的值看起來像是消失（例如：0，’ ‘(空字串)，NaN，false）就會選擇右邊。
3. 與其他運算子的結合：?? 是個有禮貌的運算子，他會讓大部分其他的運算子先行（優先級低）。如果你想讓他先行，就要用括號明確告訴他。
4. 不與 && 或 || 混用：?? 是個單純的運算子，他不喜歡和 || 或 && 混在一起，除非你用括號明確告訴他誰先誰後。

實際範例

以下是一個實際的例子，這個例子來自於網頁開發中的一種常見情況：

假設你正在開發一個網頁應用，用戶可以設定他們的個人資訊，其中包括他們的用戶名。然而，並非所有用戶都會設定用戶名，如果用戶沒有設定用戶名，你可能會顯示一個預設的名稱。在這種情況下，你可以使用 Nullish Coalescing Operator (??)：

let username = user.profile.username ?? 'Guest';

在這個例子中，如果 user.profile.username 是 null 或 undefined（也就是說，用戶沒有設定用戶名），那麼 username 變數將被設定為 'Guest'。
如果 user.profile.username 有一個非 null 或 undefined 的值（也就是說，用戶已經設定了用戶名），那麼 username 變數將被設定為這個值。

這個例子展示了 Nullish Coalescing Operator 在實際開發中的應用，它可以幫助你處理可能為 null 或 undefined 的值，並提供一個預設值。