空值合併運算子 (??) 是一個邏輯運算子，僅當左側（第一個引數）為空或未定義時才返回運算子（第二個引數）的右側。 在所有其他情況下，它返回第一個引數。

![](https://img-blog.csdnimg.cn/img_convert/d2ae4a9ef763d18b9bd8a209bba029e4.png)

下列這兩行測試程式碼，分別輸出 Hello 和 132

![](https://img-blog.csdnimg.cn/img_convert/fed5f00c73f9676b7fa44acc98bd2e2f.png)

因此，正如您在上面的示例中看到的那樣，返回 Hello 是因為 undefined 位於運算子的左側。 如果 null 代替 undefined，結果將是相同的。 在第二個示例中，如果第一個引數中存在除 null 或 undefined 以外的任何內容，則操作員不會檢查第二個引數，而是會立即列印第一個值。

在空值合併操作符被加入 ECMAScript 2020 之前，每當我們想為變數賦予預設值時，我們使用 OR (||) 邏輯運算子。 但是使用 OR 運算子有一些潛在的問題： || 運算子並不區分 false、0、“” 和 null/undefined。 所有這些都被 OR 運算子判定為返回 false，所以如果它遇到任何這些作為第一個引數，那麼我們將得到第二個引數作為結果，這使得 OR 運算子的可信度降低。

下圖顯示了 ?? 和 || 這兩個操作符的差異：

![](https://img-blog.csdnimg.cn/img_convert/346880ed5c47a1000009447ca67e96f1.png)

遇到 0，|| 會返回右邊的運算元 100，而因為 0 既不是 undefined 也不是 null，因而 0 ?? 100 會返回 0.

# 關於 ？？ 的優先順序問題

?? 運算子僅比 MDN 文件中給出的優先順序表中的 OR 運算子低一位。 這意味著它將在 = 和三元運算子之前以及 + 和 * 等運算子之後進行評估。

為了提高程式碼可讀性，在使用 ?? 時請新增小括號：

![](https://img-blog.csdnimg.cn/img_convert/6ef468dbfd605154df272388d47f4940.png)

SAP Spartacus 的實現中也有大量 ?? 的用法，如下圖所示：
![](https://img-blog.csdnimg.cn/img_convert/60b1e57ec406433c4c8b21e73af65fda.png)

談談 JavaScript 中的空值合併操作符 Nullish coalescing operator

相關文章