JavaScript 中 ?? 和 || 的区别与使用场景

在 JavaScript 开发中，为变量设置默认值是一个常见需求，即当变量缺乏有效值时采用备用值。此时，开发者常会接触到 ??（空值合并运算符）和 ||（逻辑或运算符）。尽管两者表面功能相似，但其底层逻辑与适用场景截然不同。本文将详细阐述两者的区别，帮助开发者正确选用，避免潜在错误。

|| 的工作原理：备用机制

|| 的作用类似于寻找备选方案。它检查左侧的值，若该值为“假”（即不具备可用性），则返回右侧的值。

通过具体示例可以更直观地理解：

let result = value1 || value2;

上述代码逻辑为：若 value1 有效，则使用 value1；若 value1 无效，则使用 value2。关键在于，value1 在何种情况下会被判定为无效？

什么是“假值”？

在 JavaScript 中，存在若干被视为“假”的特殊值，包括：

• false（布尔假）
• 0（数值零）
• ""（空字符串）
• null（空对象引用）
• undefined（未定义）
• NaN（非数字）

上述值均被视为“假值”。当遇到这些值时，|| 操作符将返回右侧的备用值。

示例说明：

let username = "" || "游客"; // 返回 "游客"
let score = 0 || 10;          // 返回 10

在示例中，""（空字符串）与 0 均属于“假值”。因此，JavaScript 会忽略它们，并返回后方的“游客”与 10。

何时使用 ||？

|| 的最佳应用场景在于为不确定的值提供备用方案。这类似于生活中的双重准备：若首选方案失效，立即启用备选方案。

例如，在获取用户姓名时，若用户未输入，系统可自动赋予“游客”身份。使用 || 实现此需求十分便捷：

function greetUser(name) {
  let username = name || "游客";
  console.log(`你好, ${username}!`);
}
 
greetUser("");  // 输出: 你好, 游客!
greetUser("Alice");  // 输出: 你好, Alice!

在此例中，若用户未输入姓名（如空字符串 ""），则通过 || 返回默认值“游客”。若用户输入了具体姓名（如 “Alice”），则直接使用该姓名进行问候。

JavaScript 中的 ?? 操作符：仅关注空值

JavaScript 中的 ??（空值合并运算符）虽与 || 相似，但更为“严格”。若说 || 遇到假值即切换备用，那么 ?? 仅在 null 或 undefined 出现时才介入。作为 ECMAScript 2020 (ES11) 引入的新特性，其工作机制如下。

"??" 的工作原理：仅处理“真正”的空值

?? 的操作逻辑为：仅当左侧值为 null 或 undefined 时，才返回右侧备用值。对于 0、false、"" 等“假值”，?? 视其为有效值，不会触发备用机制。

其语法结构简洁：

let result = value1 ?? value2;

含义为：若 value1 为 null 或 undefined，则返回 value2；否则直接使用 value1。

示例说明：

let username = "" ?? "游客"; // 返回 ""
let score = 0 ?? 10;          // 返回 0

在上述示例中，空字符串 "" 与 0 虽属“假值”，但因非 null 或 undefined，?? 不视其为无效，故直接返回原值。这避免了 || 可能产生的“误判”——若需将 0 或 "" 视为有效值，?? 则是理想选择。

何时使用 ??？

?? 适用于仅需处理 null 或 undefined 的场景。例如，若变量允许为 0 或 false 等值，且不希望触发默认值，可使用以下示例：

function getScore(score) {
  return score ?? 10;
}
 
console.log(getScore(0));    // 输出: 0
console.log(getScore(null)); // 输出: 10

在此例中，score 可为 0 或 null。若传入 0，?? 不视其为空值，直接返回 0。若 score 为 null，则返回默认值 10。这种机制在特定场景下极具价值，例如分数为 0 时不应被误判为无效。

?? 与 || 的关键区别：避免踩坑

在 JavaScript 中，??（空值合并运算符）与 ||（逻辑或运算符）均用于设置默认值。初学者易混淆二者，但其行为差异显著。明确使用场景与差异是避免代码错误的关键。

1. "Falsy" 与 "Nullish"：何为真正的空？

|| 的逻辑是：遇到任何“假值”（falsy）即返回备用值。这些“假值”包括：

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

只要值为上述“假值”，|| 即触发备用机制。

??：相比之下，?? 仅针对 null 与undefined。即，诸如 0、false 及 "" 等虽显“假”的值，在 ?? 判定下属有效，不触发后备值。

2. 使用场景：如何选择？

• 使用 ||：当需对所有“假值”（如 false、0 或空字符串）提供备用方案时，|| 是最佳选择。
• 使用 ??：若仅需处理 null 和 undefined，而需保留 0、false 等值，则 ?? 更为合适。

3. 举例对比：代码直观展示

let value1 = 0 || 5;    // value1 是 5
let value2 = 0 ?? 5;    // value2 是 0
 
let value3 = null || "默认值";  // value3 是 "默认值"
let value4 = null ?? "默认值";  // value4 是 "默认值"

在第一个示例中，value1 变为 5，因为 0 被 || 判定为“假值”。而在 ?? 的情况下，value2 保持为 0，因为 0 并非 null 或 undefined，故不触发备用值。

第二个示例中，null 在两种操作符下均触发备用值，结果一致。

4. 潜在 Bug：小心误用

误用 || 可能导致未预期的问题，特别是当 0、false 或 "" 为有效值时。示例如下：

function getDiscountedPrice(price) {
  return price || 100;  // 这里会返回 100，即使 price 是 0
}
 
console.log(getDiscountedPrice(0));  // 输出: 100（错误）

此处逻辑存在缺陷，因为 0 是有效价格，但 || 将其视为“假值”，最终返回备用值 100。解决方案是采用 ??，这样 0 便不会被误判：

function getDiscountedPrice(price) {
  return price ?? 100;  // 这里会正确返回 0
}
 
console.log(getDiscountedPrice(0));  // 输出: 0（正确）

5. 短路求值：谁先决定结果？

|| 与 ?? 均使用短路求值，即若左侧值足以决定结果，右侧值不再计算。但判断标准不同——|| 遇任意“假值”即短路，而 ?? 仅在 null 或 undefined 时短路。

6. 总结：如何选择？

• 若需处理所有“假值”（包括 0、false、""），请使用 ||。
• 若仅关注 null 和 undefined，且 0、false 等值为有效输入，请使用 ??。

结合 || 和 ??：多重保险，增强代码健壮性

在复杂场景中，可能需同时处理 null 和 undefined，并对其他“假值”如 0、false、"" 进行特殊处理。此时，可结合 || 与 ??，构建更全面的“多重保险”逻辑。

为何同时使用 || 和 ??？

?? 负责处理 null 和 undefined，而 || 可处理所有“假值”（如 0、false、空字符串等）。某些情况下，您可能希望 null 和 undefined 返回默认值，而对其他“假值”采用不同逻辑处理。

示例说明：

let result = (value ?? defaultValue) || fallbackValue;

此段代码执行两步处理：

1. value ?? defaultValue：首先，?? 检查 value 是否为 null 或 undefined。若是，返回 defaultValue；否则直接返回 value。 2. || fallbackValue：随后，结果经 || 处理，若结果为“假值”（如 0、false、空字符串等），则返回 fallbackValue。

示例说明：

假设处理分数系统，null 或 undefined 时需使用默认分数，但若分数为 0 亦不可忽略，需特殊处理。代码如下：

function getFinalScore(score) {
  return (score ?? 50) || "分数无效";
}
 
console.log(getFinalScore(null));  // 输出: 50（null 被 `??` 处理）
console.log(getFinalScore(0));     // 输出: "分数无效"（0 被 `||` 处理）
console.log(getFinalScore(80));    // 输出: 80（有效分数）

• null 的情况：当 score 为 null 时，?? 返回默认值 50，|| 不再触发。
• 0 的情况：当 score 为 0 时，?? 不起作用，|| 将 0 视为“假值”，返回 "分数无效"。
• 有效分数的情况：当 score 为 80 时，直接返回 80。

何时使用这种组合？

该组合特别适合需处理复杂逻辑的场景，例如：

• 遇到 null 或 undefined 时，返回默认值；
• 其他“假值”（如 0、false）需单独处理，避免被误判为无效。

结语

在 JavaScript 开发中，?? 与 || 是处理默认值的有力工具。尽管外观相似，实际应用差异显著。|| 将诸多值（如 0、false、空字符串等）视为“假值”；而 ?? 仅关注 null 和 undefined。合理选择运算符可有效避免 Bug，尤其在处理特殊值时。

您在开发中是否遇到过 || 与 ?? 的使用场景？又是如何处理的？欢迎在评论区分享经验或遇到的坑，共同交流探讨！

本文关于 JavaScript 中 "??" 和 "||" 的实现示例介绍至此。更多相关 JavaScript ?? || 内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！