JS ?? 空值合并运算符

什么是 ??= 空值合并运算符

空值合并运算符（Logical nullish assignment）?? 的作用是当一个表达式为 null 或 undefined 时给变量设置一个默认值。

一、解决的问题

当空值合并运算符 ?? 左侧的值不为 null 或 undefined 时，返回左侧的值，反之返回 ?? 右侧的值。

// 当 name 不为 null 或 undefined 时，username 的值为 name
// 当 name 为 null 或 undefined 时，username 的值为 'Leophen'
let name
const username = name ?? 'Leophen'; // 'Leophen'

二、与 || 的区别

逻辑或运算符 || 也可以进行空值合并运算：

let name
const username = name || 'Leophen'; // 'Leophen'

但 ?? 不同于逻辑或 ||，空值合并运算符 ?? 不会在左侧操作数为假值时返回右侧操作数。

举个例子：

空字符串 "" 会被 JS 认为假值。

let name = ''
const username1 = name || 'Leophen'; // 'Leophen'
const username2 = name ?? 'Leophen'; // ''

到这里，我们可以知道，之所以引入空值合并运算符 ??，是因为有时候想把假值如 0 和空字符串 '' 视为有效值，而逻辑或 || 操作符不会返回假值。用了空值合并运算符，就可以做到只把 null 或 undefined 替换为预设值。

三、配合 ||、&& 运算符使用

出于安全考虑，JS 空值合并运算符 ?? 配合逻辑或 || 和逻辑与 && 时需要用括号括起来，如果没有会报错：

let name1 = null;
let name2 = undefined;
const username = name1 || name2 ?? 'Leophen';
// Uncaught SyntaxError: Unexpected token '??'

这是因为 JS 无法决定先执行哪个操作符，需要使用括号来告知表达式的优先级：

let name1 = null;
let name2 = undefined;
const username = (name1 || name2) ?? 'Leophen'; // 'Leophen'

四、总结

JS 空值合并运算符 ?? 只会在左侧为 null 或 undefined 时返回右侧的表达式。

不同于逻辑或，空值合并运算符会允许把 0 和空字符串作为有效的数值。

注意在配合逻辑或/与使用时需要加上括号。