空值合并运算符??是ES2020引入的二元操作符,仅当左操作数为null或undefined时返回右操作数,对0、false、''、NaN等falsy值仍返回左操作数;其与||的关键区别在于??只检测nullish值,而||检测所有falsy值。

空值合并运算符 ?? 是什么
它是一个二元操作符,只在左操作数为 null 或 undefined 时返回右操作数;其他任何值(包括 0、false、''、NaN)都会原样返回左操作数。
?? 和 || 的关键区别在哪里
很多人误以为 ?? 是“更安全的 ||”,其实它们的判断逻辑完全不同:
-
||检查的是“falsy 值”:只要左值是false、0、''、null、undefined、NaN,就取右边 -
??只检查“nullish 值”:仅当左值严格等于null或undefined才取右边
这意味着你写 count ?? 10,哪怕 count 是 0,结果也是 0;而 count || 10 在 count === 0 时会错误地返回 10。
常见误用场景和修复建议
典型问题出现在处理 API 返回的可选数值或布尔字段时:
立即学习“Java免费学习笔记(深入)”;
-
后端返回
{ price: 0 },但代码写成item.price || 99→ 错误覆盖为99 - 正确写法应为
item.price ?? 99,保留0的业务含义 - 嵌套访问如
user?.profile?.age ?? 18安全且简洁;不用再写(user && user.profile && user.profile.age) || 18 - 注意优先级:
a ?? b || c等价于(a ?? b) || c,不是a ?? (b || c);混用时建议加括号明确意图
浏览器兼容性和替代方案
?? 是 ES2020 特性,现代浏览器(Chrome 80+、Firefox 74+、Safari 13.1+)已原生支持。如果需兼容旧环境:
- 用 Babel +
@babel/plugin-proposal-nullish-coalescing-operator - TypeScript 3.7+ 默认支持,并在编译时降级为三元表达式(如
a !== null && a !== void 0 ? a : b) - 手写兼容写法:
(val === null || val === undefined) ? defaultValue : val,但别为了省几字节牺牲可读性
const config = {
timeout: response.data.timeout ?? 5000,
retries: response.data.retries ?? 3,
enabled: response.data.enabled ?? true // 即使后端没传 enabled 字段,也不影响默认 true
};
真正容易被忽略的是:它不解决深层属性缺失导致的 TypeError,必须配合可选链 ?. 使用;单独写 obj.items[0].name ?? 'N/A' 在 obj.items 为空时仍会报错。










