JavaScript中??与||的区别详解
作者：moneyinto
在写业务代码时，我们经常会给变量设置默认值。很多人习惯直接用 ||：
const pageSize = options.pageSize || 10; const title = inputTitle || '未命名';
这段代码看起来很自然，但它有一个容易踩坑的地方：|| 判断的是“真假值”，而 ?? 判断的是“是否为空值”。这就是两者最核心的区别。
一句话区别
||：左边只要是 falsy，就返回右边。
??：左边只有是 null 或 undefined，才返回右边。
也就是说：
const a = value || defaultValue; const b = value ?? defaultValue;
a 关心的是 value 真不真；b 关心的是 value 有没有值。
什么会触发||的默认值？
JavaScript 里的 falsy 值包括：
false 0 '' null undefined NaN
所以这些值放在 || 左边，都会返回右边：
console.log(false || '默认值'); // 默认值
console.log(0 || '默认值'); // 默认值
console.log('' || '默认值'); // 默认值
console.log(null || '默认值'); // 默认值
console.log(undefined || '默认值'); // 默认值
console.log(NaN || '默认值'); // 默认值
这在有些场景是符合预期的，比如用户没输入内容时展示兜底文案。但在很多业务场景里，0、空字符串、false 本身就是合法值。
什么会触发??的默认值？
?? 只认两个值：null 和 undefined。
console.log(false ?? '默认值'); // false
console.log(0 ?? '默认值'); // 0
console.log('' ?? '默认值'); // ''
console.log(NaN ?? '默认值'); // NaN
console.log(null ?? '默认值'); // 默认值
console.log(undefined ?? '默认值'); // 默认值
这就是为什么它叫“空值合并运算符”。这里的“空”，不是所有假值，而是明确没有值。
一个很典型的坑：数字配置
假设接口支持传入 timeout，用户可以传 0 表示不等待：
function request(options) {
const timeout = options.timeout || 3000;
return timeout;
}
console.log(request({ timeout: 0 })); // 3000
这里用户明明传了 0，却被 || 当成假值覆盖掉了。
更合适的写法是：
function request(options) {
const timeout = options.timeout ?? 3000;
return timeout;
}
console.log(request({ timeout: 0 })); // 0
如果你的默认值逻辑是“只有没传才使用默认值”，优先考虑 ??。
表单场景也很常见
比如昵称允许为空字符串，表示用户主动清空：
const nickname = form.nickname || '匿名用户';
当 form.nickname 是 '' 时，会被替换成“匿名用户”。如果空字符串是合法输入，这就不是你想要的结果。
可以改成：
const nickname = form.nickname ?? '匿名用户';
这样只有字段不存在或值为 null 时，才走默认值。
布尔值也要小心
const showHeader = config.showHeader || true;
如果用户传入 false，这行代码最后还是得到 true。
正确写法：
const showHeader = config.showHeader ?? true;
因为 false 是一个明确的配置值，不应该被默认值覆盖。
什么时候用||？
|| 不是不能用，它适合表达“只要左边不是真值，就使用右边”。
例如：
const displayName = user.name || user.username || '匿名用户';
这个场景里，如果 name 是空字符串，我们可能确实希望继续使用 username 或兜底文案。
再比如条件执行：
isLogin || redirectToLogin();
这里的重点本来就是真假判断，使用 || 很自然。
什么时候用??？
如果你是在给配置、参数、接口字段设置默认值，大多数情况下 ?? 更安全。
尤其是这些值可能合法出现时：
0 '' false NaN
推荐写法：
const count = data.count ?? 0; const keyword = query.keyword ?? ''; const enabled = config.enabled ?? true;
和可选链一起使用
?? 经常和 ?. 搭配：
const city = user.profile?.address?.city ?? '未知城市';
这段代码的意思是：如果中间任意一层不存在，最后使用默认值。但如果 city 是空字符串，它仍然会保留下来。
注意：不能随便和||、&&混写
下面这种写法会报语法错误：
const value = a || b ?? c;
需要用括号明确优先级：
const value = (a || b) ?? c; // 或 const value = a || (b ?? c);
这是 JavaScript 为了避免歧义做的限制。
总结
可以用一个判断标准记住：
如果你想判断“有没有值”，用 ??。
如果你想判断“真不真”，用 ||。
实际项目里，给默认参数、默认配置、接口兜底时，我会优先使用 ??。它能保留 0、''、false 这些有意义的值，减少很多隐蔽 bug。
简单说：|| 更像逻辑判断，?? 更像默认值兜底。
以上就是JavaScript中??与||的区别详解的详细内容，更多关于JavaScript ??与||区别的资料请关注脚本之家其它相关文章！