【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
• react
• vue

---