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 双问号内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

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