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