空值合并运算符（??）使用场景

问题

空值合并运算符（??）有哪些使用场景？

解答

什么是空值合并运算符

空值合并运算符（??）是一个逻辑操作符，当左侧操作数为 null 或 undefined 时，返回右侧操作数，否则返回左侧操作数。

const foo = null ?? 'default string';
console.log(foo); // 'default string'

与逻辑或运算符的区别

逻辑或运算符（||）会在左侧操作数为假值时返回右侧操作数，这可能导致意外行为。而空值合并运算符只针对 null 和 undefined。

const nullValue = null;
const emptyText = ""; // 空字符串是假值
const someNumber = 42;

const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的默认值"
console.log(valB); // ""（空字符串不是 null 或 undefined）
console.log(valC); // 42

为变量赋默认值

使用 || 时，0、''、NaN 等假值会被误判：

let count = 0;
let text = "";

let qty = count || 42;
let message = text || "hi!";
console.log(qty); // 42，而不是 0
console.log(message); // "hi!"，而不是 ""

使用 ?? 可以保留这些有效的假值：

let myText = ''; // 空字符串

let notFalsyText = myText || 'Hello world';
console.log(notFalsyText); // 'Hello world'

let preservingFalsy = myText ?? 'Hi neighborhood';
console.log(preservingFalsy); // ''（保留了空字符串）

短路特性

当左侧表达式不为 null 或 undefined 时，右侧表达式不会执行：

function A() { console.log('函数 A 被调用了'); return undefined; }
function B() { console.log('函数 B 被调用了'); return false; }
function C() { console.log('函数 C 被调用了'); return "foo"; }

console.log(A() ?? C()); // 函数 A 被调用了 -> 函数 C 被调用了 -> "foo"
console.log(B() ?? C()); // 函数 B 被调用了 -> false（C 不会执行）

关键点

• ?? 只在左侧为 null 或 undefined 时返回右侧值，而 || 对所有假值生效
• 适用于需要保留 0、''、false 等有效假值的场景
• 具有短路特性，左侧有值时不会执行右侧表达式
• 常用于设置默认值，避免 || 的误判问题