ES11 中的 nullish 合并运算符 “??”：更清晰、更短的代码-JavaScript中文网-JavaScript教程资源分享门户

引言

在前端开发中，我们经常需要判断一个值是否为空或者是 undefined，在过去的操作中，我们通常使用 || 运算符来辅助这个操作，然而， || 运算符并不能区分 false 和 null。在 ECMAScript 2020（ES11）中，出现了一个新的运算符 ??（nullish 合并运算符）来解决这个问题。本文将会介绍为什么要使用 nullish 合并运算符，以及它的用法和一些示例。

为什么需要 nullish 合并运算符？

在 JavaScript 中，有一些值被认为是 false，包括 false，null，0，""，undefined 和 NaN。在过去，我们如果需要对一个值进行判断并设置一个默认值，我们通常会使用 || 运算符。例如：

const a = 0 || 1;
console.log(a); // 输出 1，因为 0 被认为是 false

但是，当我们使用 || 运算符设置默认值的时候，我们并不能准确区分值为 false 和 null 的情况。例如：

const a = null || "default";
console.log(a); // 输出 default，因为 null 被认为是 false

这种情况下，我们并不能准确判断出 null 的值。因此，为了解决这个问题，ES11 中出现了 nullish 合并运算符 ??。

nullish 合并运算符的用法

nullish 合并运算符的语法为 a ?? b，其作用是如果 a 的值是 null 或 undefined，则返回 b。否则，返回 a 的值。例如：

const a = null ?? "default";
console.log(a); // 输出 null，因为使用 nullish 合并运算符可以准确区分 null 和 false 的情况

nullish 合并运算符可以与模板字符串一起使用。例如：

const name = undefined;
const greeting = `Hello, ${name ?? "World"}!`;
console.log(greeting); // 输出 "Hello, World!"，因为 name 的值是 undefined

nullish 合并运算符也可以与函数的默认值一起使用。例如：

// javascriptcn.com 代码示例
function greet(name = "World") {
  console.log(`Hello, ${name}!`);
}

greet(); // 输出 "Hello, World!"，使用默认值
greet(null); // 输出 "Hello, null!"，使用 null
greet(undefined); // 输出 "Hello, World!"，使用默认值
greet(false); // 输出 "Hello, false!"
greet(""); // 输出 "Hello, !"

总结

nullish 合并运算符可以帮助我们准确地区分 false 和 null 的情况，并且可以减少使用 || 运算符的代码量。在实际使用中，我们可以将 nullish 合并运算符与模板字符串、函数默认值等方法相结合来提高代码的简洁性和可读性。

参考

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653634f47d4982a6ebe2363f