JavaScript 中的 ?? 与 || 运算符详解

在 JavaScript 开发中，我们经常需要处理默认值或回退值的情况。两个常用的运算符是空值合并运算符(??)和逻辑或运算符(||)。虽然它们看起来功能相似，但实际应用场景却大不相同。

逻辑或运算符 ||

|| 运算符是 JavaScript 中的传统选择，它会返回第一个"真值"，如果左侧操作数为假值（如 false、0、""、null、undefined 或 NaN），则返回右侧操作数。

js 复制代码

const name = userName || "默认用户";

问题是什么？当我们明确想使用 0 或空字符串 "" 时，|| 会跳过这些值，因为它们被视为假值。

空值合并运算符 ??

ES2020 引入的 ?? 运算符更加精确，它只在左侧操作数为 null 或 undefined 时才返回右侧操作数。

js 复制代码

const count = userCount ?? 0;

这意味着空字符串和数字 0 会被保留，而不会被默认值替代。

实际对比案例

js 复制代码

// 使用 ||
0 || 10           // 返回 10
"" || "默认文本"   // 返回 "默认文本"
false || true     // 返回 true

// 使用 ??
0 ?? 10           // 返回 0
"" ?? "默认文本"   // 返回 ""
false ?? true     // 返回 false
null ?? "默认值"   // 返回 "默认值"
undefined ?? 42   // 返回 42

如何选择？

当你只想在值为 null 或 undefined 时使用默认值，选择 ??
当你想在任何假值情况下使用默认值，选择 ||

实际应用场景

表单处理时，空字符串可能是有效输入：

js 复制代码

// 更好的选择
const userInput = formValue ?? "默认消息";

// 可能有问题的选择
const userInput = formValue || "默认消息"; // 空字符串会被替换

计数场景中，0 是有效值：

js 复制代码

// 更好的选择
const displayCount = count ?? "无数据";

// 可能有问题的选择
const displayCount = count || "无数据"; // 0 会被替换为"无数据"

结语

?? 和 || 各有用处，关键是了解它们处理假值的差异。?? 只关心 null 和 undefined，而 || 会检查所有假值。根据具体需求选择合适的运算符，可以让代码更精确、更易于维护。希望这篇文章能帮助你更好地理解并运用这两个运算符！