在以往的 JavaScript 编程中，我们常常使用逻辑运算符来检查并处理空值情况。而从 ES2020 开始，Nullish Coalescing Operator（空值合并运算符）被正式引入其中，可以更加简练和优雅地进行空值判断与合并。
空值合并运算符的用法
在语法方面，空值合并运算符使用两个问号（??）表示，其作用是判断某个值是否为 null 或 undefined，如果是则返回另一个值，否则返回原来的值。
具体来说，其使用方式为：
let result = value1 ?? value2;
如果 value1 不为 null 或 undefined，则返回 value1；否则返回 value2。实际上，这也是空值合并运算符的主要功能所在。在许多情况下，我们需要对变量或表达式的值进行判断，如果它们有一个默认值，那么可以使用空值合并运算符，以此减少代码量并提高可读性。
举个例子：
// javascriptcn.com 代码示例 let foo = null; let bar = "hello world"; let result = foo ?? bar; console.log(result); // "hello world" foo = "hello"; result = foo ?? bar; console.log(result); // "hello"
如上所示，当 foo 为 null 时，空值合并运算符将返回它的备选值 bar，而当 foo 不为 null 时，则直接返回其本身。这种表达式的运算结果将取决于 foo 的值，代码的可读性也相比于 foo ? foo : bar 更加简明易懂。
在一些函数调用时，这也可以很好地避免各种非空判断带来的麻烦。比如下面这个例子：
function showUsername(username) {
let loginName = username ?? "guest";
console.log(`Welcome, ${loginName}`);
}
showUsername("Jack"); // "Welcome, Jack"
showUsername(null); // "Welcome, guest"这个函数使用空值合并运算符，将 username 的值与 "guest" 相比较。如果 username 为 null 或 undefined，则返回 "guest"；否则返回它的值。这样，我们就不用在函数中再进行一次冗余的非空判断操作，提高了代码的可读性和编写效率。
空值合并运算符与逻辑运算符的区别
前面提到过，在 JavaScript 的编程中，我们通常使用逻辑运算符（如 ||）来判断变量或者表达式的值是否为空。但是，我们也需要知晓空值合并运算符与逻辑运算符之间的区别。
空值合并运算符只有在左侧的值为 null 或 undefined 时才会进行右侧的运算。而逻辑运算符会对左侧的值进行类型转换，因此可能会得到一个不是布尔类型的值。具体来说，或运算符 || 只要左侧的值为假值，就会返回右侧的值。空字符串、数字 0、false 或 null 都是假值，但是 undefined 是一个特殊的值。它在使用或运算符时会被强制转换成假值。下面代码字面输出了各个值变量使用或运算符运算的结果，可以更好地理解这一点：
// javascriptcn.com 代码示例 let foo = ""; let bar = 0; let baz = false; let qux; console.log(foo || "default"); // "default" console.log(bar || "default"); // "default" console.log(baz || "default"); // "default" console.log(qux || "default"); // "default" console.log(undefined || "default"); // "default"
从上面的代码可以看到，只要左侧的值不为假值，就会返回左侧的值本身。空字符串、0 和 false 都作为假值类型，undefined 和 null 也被认为是假的，因此返回右侧的默认值 "default"。
与之不同的是，空值合并运算符只会在左侧值为 null 或 undefined 时返回备选值。如果左侧的值为其他 falsy 类型，例如 0 或空字符串，那么仍然会返回原来的值而不是备选值，这与逻辑运算符的行为不同。看下这个示例，同样一段 code，不同函数使用不同的运算符，输出的结果却不同：
// javascriptcn.com 代码示例
let foo = "";
let baz = false;
function showValue(value) {
let displayValue = value ?? "default";
console.log(displayValue);
}
showValue(foo || "default"); // "" ，依然返回 falsy 值
showValue(baz || "default"); // false从上面的结果中，可以看到左侧值为 "" 时，逻辑运算符返回的是 "default"，但是空值合并运算符却返回了空字符串本身。这就是两个运算符存在的一些根本的区别。
总结
空值合并运算符的引入，进一步提高了 JavaScript 的编程效率和可读性。它能够更加优雅地处理某些空值情况，并且避免了和逻辑运算符相比存在的隐患。在应用空值合并运算符时，要注意它的用法和语法，避免进行冗余的非空判断，使代码更简单易懂，提高了程序的可读性。
参考文献
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6534bd7f7d4982a6eb9dcf2e