ES2020新文法：空值合并運算符 `??`

空值合并操作符（

??

）是一個邏輯操作符，當左側的操作數為

null

或者

undefined

時，傳回其右側操作數，否則傳回左側操作數。

const a = null ?? "default string"; // "default string"
const b = undefined ?? 32; // 32
           

與邏輯或操作符（

||

）不同，邏輯或操作符會在左側操作數為假值時傳回右側操作數。

const a = "" || "default string"; // "default string"
const b = "" ?? "default string"; // ""

const c = 0 || 32; // 32
const d = 0 ?? 32; // 0

const e = false || "default string"; // "default string"
const f = false ?? "default string"; // false
           

也就是說，空值運算符僅在左側操作數為

null

或者

undefined

的時候才傳回右側操作數，而邏輯或操作符在左側操作數為

null

，

undefined

，

""

，

，

NaN

，

false

的時候都會傳回右側操作數。

下面來看一下常見用法：

變量預設值

空值合并運算符把

，

""

，

NaN

都視為有效值。僅在第一個操作數為

null

或

undefined

時才傳回第二個操作數。

let foo; // undefined
let someDummyText = foo ?? 'Hello!'; // hello
           

短路

與 OR 和 AND 邏輯操作符相似，當左表達式不為

null

或

undefined

時，不會對右表達式進行求值。

function A() { return undefined; }
function B() { return false; }
function C() { return "foo"; }

A() ?? C() // C方法不會調用
B() ?? C() // C方法會被調用
           

不能與 AND 或 OR 操作符共用

下面的代碼會抛出

SyntaxError

，因為空值合并操作符和其他邏輯操作符之間的運算優先級/運算順序是未定義的。

null || undefined ?? "foo"; // 抛出 SyntaxError
true || undefined ?? "foo"; // 抛出 SyntaxError
           

如果使用括号來顯式表明運算優先級，是沒有問題的：

與可選鍊操作符的關系

空值合并操作符針對

undefined

與

null

這兩個值，可選鍊式操作符（

?.

） 也是如此。

參考：

空值合并運算符 - MDN