JavaScript中双问号(??)操作符详解

在 JavaScript 中，?? 被称为空值合并操作符（Nullish Coalescing Operator）。这是 ES2020（ES11）引入的一项新特性，主要用于处理默认值的赋值问题。相比传统的 || 逻辑或操作符，?? 在判断标准上更加严格，能更准确地表达“仅在值为 null 或 undefined 时使用默认值”的意图。本文将详细介绍 ?? 的作用、用法、与其他操作符的区别及实际应用场景。

一、双问号（??）操作符概述

1. 什么是空值合并操作符

空值合并操作符 ?? 是一种逻辑运算符，用于在左侧表达式的值为 null 或 undefined 时，返回右侧的默认值。简单来说，就是：

• 如果左侧的值是 null 或 undefined，返回右侧的值；
• 否则，返回左侧的值。

2. 基本语法

let result = a ?? b;

• a 是要检查的值；
• b 是当 a 为 null 或 undefined 时使用的默认值；
• 最终 result 的值是 a 或 b，取决于 a 是否为 null 或 undefined。

3. 简单示例

let username;
let displayName = username ?? "匿名用户";
console.log(displayName); // 输出："匿名用户"

在这个例子中，因为 username 是 undefined，所以最终 displayName 赋值为右侧的 “匿名用户”。

如果 username 有一个实际的值，比如：

let username = "张三";
let displayName = username ?? "匿名用户";
console.log(displayName); // 输出："张三"

那么就直接使用 username 的值，不使用默认值。

二、为什么需要 ?? 操作符

1. 传统的 || 存在的问题

在 ?? 出现之前，我们常常用逻辑或 || 来处理默认值，比如：

let username = "";
let displayName = username || "匿名用户";
console.log(displayName); // 输出："匿名用户"

问题是，|| 会把**所有假值（falsy value）**都当成无效，包括：

• false
• 0
• NaN
• ""（空字符串）
• null
• undefined

上面例子中，虽然 username 是空字符串 ""，理论上是有意义的（可能用户就是想提交一个空的名字），但 || 认为空字符串是无效的，于是强行用了默认值。这并不是我们想要的。

2. ?? 更合理的默认值逻辑

?? 只在 null 和 undefined 时才使用默认值，其它的假值（比如 0、false、""）都会被当作有效值保留下来。

修改上面的例子：

let username = "";
let displayName = username ?? "匿名用户";
console.log(displayName); // 输出：""

这次不会强行替换默认值，而是保留了空字符串。这就更加符合实际开发中对于“值是否存在”的真实判断需求。

三、?? 操作符的使用细节

1. null 和 undefined 的区别对待

?? 只关心 null 和 undefined，忽略其他 falsy 值。

示例：

console.log(false ?? "默认值"); // false
console.log(0 ?? 100);          // 0
console.log("" ?? "默认字符串"); // ""
console.log(null ?? "默认值");   // "默认值"
console.log(undefined ?? "默认值"); // "默认值"

可以看到，只有当值为 null 或 undefined 时，右侧的默认值才生效。

2. 与三元表达式（条件表达式）的对比

很多人可能习惯使用三元表达式：

let result = (a !== null && a !== undefined) ? a : b;

其实用 ?? 可以大大简化：

let result = a ?? b;

这样代码更加简洁，易读性也更好。

3. 与逻辑运算符优先级相关

?? 的优先级比 || 和 && 要低，但比赋值 = 高。在组合使用时，需要注意加括号明确逻辑。

错误示例：

let a = null || undefined ?? "默认值"; // SyntaxError: Unexpected token '??'

正确写法应该加括号：

let a = (null || undefined) ?? "默认值"; 
console.log(a); // 输出："默认值"

或者彻底拆开来写，避免混用。

4. 禁止与 && 和 || 直接混用

JavaScript 规定，如果要同时使用 ?? 和 &&、||，必须用括号包裹清晰逻辑，否则会抛出 SyntaxError。

例如：

let x = (a || b) ?? c;

而不是：

let x = a || b ?? c; // ❌ 错误，语法错误

四、实际应用场景

1. 设置默认参数

函数参数如果没有传值，可以用 ?? 设置默认值。

function greet(name) {
  let userName = name ?? "游客";
  console.log(`你好，${userName}`);
}

greet("李雷"); // 你好，李雷
greet();      // 你好，游客

2. 读取对象属性

读取对象中的某个属性时，防止属性不存在导致显示错误。

let user = {
  name: "小明",
  age: 0
};

console.log(user.name ?? "匿名"); // 小明
console.log(user.age ?? "未知");  // 0
console.log(user.gender ?? "保密"); // 保密

这里即使 age 是 0，?? 也不会替换成默认值。

3. 配合解构赋值使用

在解构赋值时，结合 ?? 可以更加灵活处理默认值。

let settings = {
  theme: null,
  layout: "grid"
};

let theme = settings.theme ?? "light";
let layout = settings.layout ?? "list";

console.log(theme); // light
console.log(layout); // grid

如果 theme 是 null，则使用默认值 light；如果 layout 已经有值 grid，则保留。

4. 配合可选链（?.）使用

?? 和可选链（?.）搭配使用非常高效，可以避免层层判断。

let user = {
  profile: {
    nickname: ""
  }
};

let nickname = user.profile?.nickname ?? "未命名";
console.log(nickname); // ""

这里即使 nickname 是空字符串，也不会被替换；如果 profile 不存在，也不会抛出异常，而是走默认值。

五、常见问题与注意事项

1. 区分 falsy 值和 null/undefined

?? 只针对 null 和 undefined，不像 || 那样针对所有 falsy 值。这是它最核心的区别。务必根据业务场景选择使用哪种操作符。

如果你希望 0、false、“” 也能触发默认值，用 ||； 如果你只关心 null 或 undefined，应该用 ??。

2. 语法错误要注意加括号

混合使用 &&、|| 和 ?? 时，务必加括号明确优先级，否则 JavaScript 会抛出语法错误。

3. 浏览器兼容性

• ?? 是 ES2020 新增的特性；
• 现代浏览器（Chrome 80+，Firefox 72+，Edge 80+，Safari 13.1+）基本已经支持；
• 如果需要兼容老旧浏览器（比如 IE11），可以使用 Babel 转译处理。

六、总结

空值合并操作符 ?? 是一个非常实用的 JavaScript 新特性，它可以帮助我们更加准确地处理默认值，避免传统 || 在 0、false、“” 等值上的逻辑误判。掌握 ?? 的使用，不仅可以让你的代码更加简洁，也能让逻辑更加清晰明确。特别是在函数参数处理、对象属性读取、配置项设置等场景中，?? 都能发挥极大的作用。

在日常开发中，只要牢记：只有在值为 null 或 undefined 时，才使用默认值，你就能准确地应用好 ??，写出更优雅、更健壮的 JavaScript 代码。

到此这篇关于JavaScript中双问号(??)操作符详解的文章就介绍到这了,更多相关JavaScript 双问号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论