脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript ??与||区别

JavaScript中??与||的区别详解

 更新时间：2026年06月11日 09:31:46   作者：moneyinto  
这段文章详细解释了JavaScript中三元运算符??和逻辑或||的区别及应用场景,文章指出,用于真假判断,而?用于非空值判断,强调在给默认值时优先使用?以保留有意义的值,减少隐蔽bug,需要的朋友可以参考下

在写业务代码时，我们经常会给变量设置默认值。很多人习惯直接用 ||：

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 ??与||区别的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论