JavaScript Nullish Coalescing Operator (空值合并运算符)

双问号（??）表示 ES6 中引入的空值合并运算符。当其左侧操作数为 undefined 或 null 时，空值合并（??）运算符会返回其右侧操作数。在所有其他情况下，逻辑运算符会返回其左侧操作数。

空值合并运算符是用于默认输出右侧操作数的逻辑运算符。

语法

以下语法显示了空值合并运算符的基本操作。空值合并运算符将接受两个值

如果第一个值（second_value）为 null 或 undefined，则空值合并运算符将返回第二个值（second_value）。

空值合并运算符的旧方法

以下代码块对应于空值合并运算符

任何 undefined 或 null 值都被视为具有空值。

如何操作空值合并运算符

下面的示例使用空值合并运算符（??）返回字符串“Javatpoint”，因为第一个值为 null。

以下语法显示了输出

const mark = undefined ?? 80;
console.log(mark);

示例

以下示例展示了 JavaScript 中的空值合并运算符。我们使用逻辑和比较运算符显示多个值。

示例 1：以下示例展示了 JavaScript 中空值合并运算符的基本用法。我们可以看到字符串和数值数据与 null 数据进行比较。

输出

下图显示了运算符输出的两个值。

示例 2：以下示例展示了在 JavaScript 中将空值合并运算符与变量一起使用。

输出

下图显示了运算符输出的四个值。

示例 3: 以下示例展示了在 JavaScript 中将空值合并运算符与函数一起使用。我们可以在控制台选项卡中看到不同函数属性数据的函数的所有数据。

输出

下图显示了运算符输出的三个值。

示例 4：以下示例展示了在 JavaScript 中将空值合并运算符与常量变量一起使用。我们可以将常量函数用作带有值的函数。

输出

下图显示了运算符输出的三个值。

为什么要使用空值合并运算符

• 逻辑 OR 运算符（||）经常用于为变量设置默认值。例如

• 语法中的 count 变量未定义，被强制为 false。结果是 two。
• 但是，如果将 0 或空字符串“”视为有效值，逻辑 OR 运算符（||）可能会令人困惑，如下面的语法所示

• 我们可能会惊讶地发现结果是 2，而不是 0。
• 我们可以借助空值合并运算符来避免这种陷阱。仅当第一个值是 null 或 undefined 时，它才会返回第二个值。

空值合并运算符中会发生短路。

• 空值合并运算符的工作方式类似于逻辑 AND 和 OR 运算符。如果第一个操作数不是 undefined 或 null，则它不会考虑第二个值。
• 考虑以下演示

• 此演示中的参数的初始值为 21。值不是 null 或 undefined。
• 运算符（??）不检查第二个参数，而是将单词“Hello”输出到警报框。
• 第一个参数为 null；演示会检查第二个参数。

示例

以下示例展示了 JavaScript 中空值合并运算符的短路。我们使用逻辑运算符在控制台、警报框和 div 标签中显示多个值。

示例 1：以下示例展示了在 JavaScript 中将空值合并运算符与变量一起使用。

输出

下图显示了运算符输出的各种值。

输出 1

示例 2：以下示例展示了 JavaScript 中空值合并运算符的短路。我们可以看到带有 null、非 null 操作数的 JavaScript 功能。

输出

下图显示了使用该运算符的网页和控制台值。

输出 1

图片显示第一个操作数不为 null。

输出 2

图片在控制台中显示第一个操作数为 null。

使用 AND 或 OR 运算符进行链式调用

• 直接将逻辑 AND 或 OR 运算符与空值合并运算符结合使用。在以下语法中，我们将收到 SyntaxError

• 但是，您可以通过将 ?? 运算符左侧的语句括在括号中来显式声明运算符优先级，从而避免此错误。

示例

以下示例展示了 JavaScript 中空值合并运算符的短路。我们可以看到带有 null、非 null 操作数的 JavaScript 功能。

输出

下图显示了该运算符在网页上的值。

总结

当给定两个值时，空值合并运算符（??）在第一个值为 null 或 undefined 时返回第二个值。由于短路，逻辑 AND 或 OR 运算符不能直接与 JavaScript 空值合并运算符结合使用。