空值合并操作符 ?? 在 JavaScript 中用于精确处理默认值，仅当左侧为 null 或 undefined 时返回右侧值，与 || 运算符不同，后者会将 0、''、false 等假值也视为“空”。?? 更适用于 0、false、空字符串为有效值的场景，如配置项、用户输入等，能避免 || 带来的意外覆盖。使用时需注意：?? 不能与 && 或 || 混合使用而无括号，否则会报语法错误，必须通过括号明确优先级。该操作符自 ES2020 引入，现代浏览器支持良好，旧环境可通过 Babel 转译确保兼容。
JavaScript中的空值合并操作符
??，在我看来，是一个相当优雅且实用的语法糖，它提供了一种更精确的方式来处理默认值。简单来说，它只会在左侧表达式为
null或
undefined时，才使用右侧的默认值。这和我们过去习惯的
||运算符有着本质的区别，让代码在很多场景下变得更加清晰和可靠。
解决方案
空值合并操作符
??（Nullish Coalescing Operator）是ES2020引入的一个新特性，它的核心功能是当左侧的操作数为
null或
undefined时，返回右侧的操作数；否则，返回左侧的操作数。这和逻辑或操作符
||有着关键的不同。
举个例子，假设我们有一个配置对象，其中某个属性可能未定义，或者明确设置为
null。我们希望为它提供一个默认值。
// 传统方式，使用 ||
const configA = { timeout: 0 };
const timeoutA = configA.timeout || 3000; // timeoutA 会变成 3000，因为 0 是一个 falsy 值
const configB = { timeout: null };
const timeoutB = configB.timeout || 3000; // timeoutB 会变成 3000
const configC = {};
const timeoutC = configC.timeout || 3000; // timeoutC 会变成 3000
console.log(timeoutA); // 3000
console.log(timeoutB); // 3000
console.log(timeoutC); // 3000
// 使用 ??
const configD = { timeout: 0 };
const timeoutD = configD.timeout ?? 3000; // timeoutD 依然是 0，因为 0 既不是 null 也不是 undefined
const configE = { timeout: null };
const timeoutE = configE.timeout ?? 3000; // timeoutE 会变成 3000
const configF = {};
const timeoutF = configF.timeout ?? 3000; // timeoutF 会变成 3000，因为 configF.timeout 是 undefined
console.log(timeoutD); // 0
console.log(timeoutE); // 3000
console.log(timeoutF); // 3000从上面的例子可以看出，
??运算符在处理
0、
''（空字符串）或
false这些在
||运算符看来是“假值”但实际上可能是有效值的情况下，表现出了它的独特优势。它只关心是不是
null或
undefined，这使得我们在为变量设置默认值时，能够更加精确地表达意图。
??
和 ||
运算符有什么本质区别？
这真的是一个非常值得深挖的问题，因为这两个运算符看起来相似，但在实际应用中，它们对“空”的定义完全不同。我个人觉得，理解这个区别是掌握
??关键。
||逻辑或运算符，它会检查左侧操作数是否为“假值”（falsy value）。在 JavaScript 中，假值包括：
false、
0、
''（空字符串）、
null、
undefined和
NaN。只要左侧是这些值中的任何一个，
||就会返回右侧的操作数。这在很多场景下非常方便，比如快速为变量提供一个“非空”的默认值。
但是，问题也随之而来。设想一下，如果
0、
''或
false本身就是你想要保留的有效值呢？比如，一个用户配置项
timeout设置为
0，意味着“永不超时”；一个
userName设置为空字符串
''，意味着“匿名”；或者一个
isAdmin布尔值设置为
false，表示“不是管理员”。在这些情况下，如果使用
||来提供默认值，那么
0、
''和
false都会被误认为是“无效”或“空”，从而被默认值替代，这显然不是我们想要的。
而
??空值合并操作符，它对“空”的定义要严格得多。它只关心左侧操作数是否是
null或
undefined。只有当左侧是这两者之一时，它才会返回右侧的操作数。这意味着，像
0、
''、
false甚至是
NaN，在
??看来，它们都是“有值”的，都会被保留下来。这种精确性，在我看来，大大提升了代码的语义表达能力，减少了潜在的bug。
所以，本质区别在于：
||
关心的是“假值”（falsy values）。??
关心的是“空值”（nullish values），即null
和undefined
。
理解这个差异，你就知道什么时候该用哪个了。
在实际开发中，何时应该优先选择 ??
而不是 ||
？
在实际开发中，我发现
??运算符的引入，让很多过去需要额外判断才能写清楚的逻辑，变得简洁明了。我通常会在以下几种情况中优先选择
??：
-
当
0
、false
或''
（空字符串）是有效且有意义的值时： 这是??
最经典的用武之地。-
数值配置： 比如一个API请求的超时时间
timeout
，如果设置为0
，可能意味着“不设置超时”或“立即返回”。const userSettings = { timeout: 0, retries: null }; const actualTimeout = userSettings.timeout ?? 5000; // 得到 0，而不是 5000 const actualRetries = userSettings.retries ?? 3; // 得到 3 console.log(`Timeout: ${actualTimeout}, Retries: ${actualRetries}`); // Timeout: 0, Retries: 3 -
布尔标志： 一个
isEnabled
属性，如果明确设置为false
，就应该保持false
，而不是被默认值true
覆盖。const featureConfig = { isEnabled: false, // showTips: undefined }; const displayFeature = featureConfig.isEnabled ?? true; // 得到 false const showUserTips = featureConfig.showTips ?? true; // 得到 true console.log(`Display Feature: ${displayFeature}, Show Tips: ${showUserTips}`); // Display Feature: false, Show Tips: true -
字符串处理： 用户名或描述字段，如果用户输入了空字符串，这本身可能就是一种有效状态，而不是未提供。
const userData = { username: '', email: null }; const displayUsername = userData.username ?? '匿名用户'; // 得到 '' const displayEmail = userData.email ?? '未提供'; // 得到 '未提供' console.log(`Username: "${displayUsername}", Email: "${displayEmail}"`); // Username: "", Email: "未提供"
-
数值配置： 比如一个API请求的超时时间
维护数据类型和精确性： 当你从后端API获取数据时，如果某个字段可能返回
null
或undefined
，但你希望其他非空值（包括0
或false
）能够被正确地保留下来，??
就显得非常重要。它帮助你确保数据的完整性，避免了||
可能导致的类型转换或值丢失。避免意外的副作用： 有时候，左侧表达式可能是一个函数调用，如果这个函数返回
0
或false
，而你又不想它被默认值覆盖，??
是更安全的选择。
总而言之，只要你认为
0、
false或
''应该被视为“有意义的值”而不是“空”，那么
??就是你设置默认值时的首选。它让你的代码意图更加明确，也减少了因为“假值”判断带来的潜在逻辑错误。
??
运算符可以和 &&
或 ||
混合使用吗？有哪些注意事项？
是的，
??运算符可以和
&&（逻辑与）或
||（逻辑或）混合使用，但这里有一个非常重要的“坑”需要注意，否则会遇到语法错误。
JavaScript为了避免操作符优先级可能导致的歧义，不允许 ??
直接与 &&
或 ||
在同一个表达式中不加括号地混合使用。 如果你尝试这样做，JavaScript 会抛出一个
SyntaxError。
比如，这样的写法是会报错的：
// 这会抛出 SyntaxError // const result = someValue ?? anotherValue || defaultValue; // const result = someValue ?? anotherValue && defaultValue;
这是因为
??的优先级介于
&&和
||之间。为了强制你明确意图，JS 引擎要求你必须使用括号来明确分组。
正确的使用方式是使用括号来明确操作符的执行顺序：
-
结合
||
： 如果你想先执行||
，再用??
提供最终的默认值：const userPref = null; const defaultSetting = 'default'; const finalValue = (userPref || 'fallback') ?? defaultSetting; // 解释：userPref || 'fallback' -> null || 'fallback' -> 'fallback' // 'fallback' ?? defaultSetting -> 'fallback' console.log(finalValue); // 'fallback' const anotherPref = 0; const finalValue2 = (anotherPref || 'fallback') ?? defaultSetting; // 解释：anotherPref || 'fallback' -> 0 || 'fallback' -> 'fallback' // 'fallback' ?? defaultSetting -> 'fallback' console.log(finalValue2); // 'fallback'
如果你想先用
??
处理空值，然后整个表达式再与||
结合：const userPrefA = undefined; const userPrefB = null; const userPrefC = 0; const result = (userPrefA ?? userPrefB) || userPrefC; // 解释：userPrefA ?? userPrefB -> undefined ?? null -> null // null || userPrefC -> null || 0 -> 0 console.log(result); // 0
-
结合
&&
： 如果你想先执行&&
，再用??
提供默认值：const condition = true; const value = null; const finalResult = (condition && value) ?? 'default'; // 解释：condition && value -> true && null -> null // null ?? 'default' -> 'default' console.log(finalResult); // 'default' const condition2 = false; const value2 = 'data'; const finalResult2 = (condition2 && value2) ?? 'default'; // 解释：condition2 && value2 -> false && 'data' -> false // false ?? 'default' -> false console.log(finalResult2); // false
如果你想先用
??
处理空值，然后整个表达式再与&&
结合：const a = undefined; const b = 'hello'; const c = 'world'; const result = (a ?? b) && c; // 解释：a ?? b -> undefined ?? 'hello' -> 'hello' // 'hello' && c -> 'hello' && 'world' -> 'world' console.log(result); // 'world'
总结注意事项：
-
必须使用括号： 这是最重要的规则。当你需要在同一个表达式中同时使用
??
和&&
或||
时，请务必使用括号来明确你想要的操作顺序。 -
理解优先级： 虽然强制使用括号避免了优先级问题，但了解
??
的优先级低于&&
和||
仍然有助于你更好地设计表达式。 -
清晰意图： 引入
??
的目的就是为了更清晰地表达“空值”的概念。在混合使用时，也要确保你的代码意图依然清晰，避免过度复杂的表达式。如果一个表达式变得过于复杂，可以考虑将其拆分成多个步骤或使用临时变量。
??
运算符的浏览器兼容性和Polyfill方案是怎样的？
??运算符是 ECMAScript 2020 (ES2020) 标准中引入的特性，这意味着它在较新的 JavaScript 环境中才能直接使用。
浏览器兼容性： 目前，主流的现代浏览器对
??运算符的支持都非常好，包括：
- Chrome (从 80 版本开始)
- Firefox (从 72 版本开始)
- Edge (从 80 版本开始)
- Safari (从 13.1 版本开始)
- Opera (从 67 版本开始)
你可以访问像 caniuse.com 这样的网站来查看最新的兼容性信息。对于绝大多数桌面和移动端用户来说，现在使用
??已经不是什么大问题了。
Polyfill 方案： 虽然现代浏览器支持良好，但如果你需要支持一些老旧的浏览器环境（例如，一些企业内部应用可能还在使用旧版IE，或者某些嵌入式浏览器），那么你就需要考虑 Polyfill 或转译（Transpilation）方案。
通常，我们不会直接为
??运算符编写 Polyfill 代码，因为它是一个语法特性，而不是一个全局对象或方法。最常见的做法是使用 Babel 这样的 JavaScript 编译器来将 ES2020+ 的语法转译成 ES5 或其他目标环境支持的语法。
当你使用 Babel 时，配合
@babel/preset-env预设，它会自动检测你的目标浏览器环境，并将
??这样的新语法转换为等效的旧语法。
例如，
a ?? b可能会被转译成类似这样的形式：
var a = someValue; var b = defaultValue; var result = (a !== null && a !== undefined) ? a : b;
或者更简洁的：
var result = (someValue == null) ? defaultValue : someValue;
（注意这里的
== null会同时检查
null和
undefined，这是 JS 的一个特性。）
如何配置 Babel： 如果你正在使用 Webpack、Rollup 或 Parcel 等构建工具，你通常会在 Babel 的配置文件（如
.babelrc或
babel.config.js）中配置
@babel/preset-env。
一个简单的
babel.config.js示例：
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
edge: '17',
firefox: '60',
chrome: '67',
safari: '11.1',
// 你可以根据你的项目需求指定支持的浏览器版本
},
useBuiltIns: 'usage', // 如果需要，也可以配置polyfill
corejs: 3,
},
],
],
};通过这样的配置，Babel 会自动处理
??这样的语法，确保你的代码在目标环境中也能正常运行。
在我看来，对于大多数现代前端项目，直接使用
??已经是一个非常安全且推荐的做法。如果你的项目确实有兼容老旧浏览器的需求，那么通过构建工具和 Babel 进行转译是标准且高效的解决方案，通常不需要手动编写 Polyfill。
