应使用??而非||来保留0、false、''等合法falsy值;??仅在操作数为null/undefined时生效,优先级高于||但低于=,混用时须加括号,且不支持IE及旧Edge。

?? 是 JavaScript 的空值合并运算符,它只在左侧操作数为 null 或 undefined 时返回右侧操作数;而 || 在左侧为任意“falsy”值(如 0、''、false)时都会触发右侧逻辑。
什么时候该用 ?? 而不是 ||
当你想保留 0、false、'' 这类合法但 falsy 的默认值时,必须用 ??。比如配置项允许关闭功能(enabled: false),或允许设置数量为零(count: 0)。
-
const count = user.inputCount ?? 10;→ 用户输0,结果就是0;输undefined,才用10 -
const count = user.inputCount || 10;→ 用户输0,结果反而是10(错误覆盖) - 常见误用场景:表单字段默认值、API 响应字段 fallback、状态初始化
?? 的结合性与括号必要性
?? 的优先级低于 = 和 ?:,但高于 && 和 || —— 所以混用时极易出错,必须加括号明确意图。
- ❌ 错误写法:
let x = a ?? b || c→ 实际等价于let x = (a ?? b) || c,若a为null、b为false,结果是c,而非预期的b - ✅ 正确写法:
let x = a ?? (b || c)(取第一个非 null/undefined,否则 fallback 到b或c的逻辑或结果) - ⚠️ 注意:
??不能直接跟&&或||连用而不加括号,会报SyntaxError: Invalid left-hand side in assignment
浏览器兼容性与降级处理
现代浏览器(Chrome 80+、Firefox 74+、Safari 13.1+)原生支持 ??;IE 完全不支持,旧版 Edge(≤18)也不支持。
立即学习“Java免费学习笔记(深入)”;
- 构建时用 Babel 转译需启用
@babel/plugin-proposal-nullish-coalescing-operator - TypeScript 3.7+ 支持,且类型推导更准确(例如
string | null??'default'推导为string) - 手写 polyfill 不可行 —— 这是语法层面的运算符,无法用函数模拟
const settings = {
theme: null,
fontSize: 0,
notifications: false
};
// ✅ 用 ??:保留 0 和 false
console.log(settings.fontSize ?? 16); // 0
console.log(settings.notifications ?? true); // false
// ❌ 用 ||:意外覆盖合法值
console.log(settings.fontSize || 16); // 16(错误!)
console.log(settings.notifications || true); // true(错误!)
真正容易被忽略的是结合性规则——哪怕你记住了 null/undefined 的语义,一不留神混用 || 或 && 就会触发语法错误或逻辑翻车。











