在 JavaScript 中使用 nullish 合并（ES11 新特性）

JavaScript 中，我们通常使用逻辑或 (||) 运算符来提供默认值，例如：

const foo = options.foo || 'default';

然而，当属性值等于假值 (0、空字符串、false 等) 时，这种实现方法会出现问题。这时我们需要使用 nullish 合并运算符 (??)。本文将详细介绍 nullish 合并运算符以及如何使用它。

nullish 合并运算符是什么？

nullish 合并运算符 (??) 是 ECMAScript 2020 (ES11) 中的一个新特性。它的作用是在变量为 null 或 undefined 时提供默认值。

假设我们有一个对象：

const options = {
  foo: '',
  bar: null,
  baz: 0,
  qux: 'hello',
};

如果我们想要获取 foo 属性的默认值，可以采用如下代码实现：

const defaultValue = options.foo ?? 'default';

如果 foo 属性等于假值 ('')，这里的操作符会返回正确的默认值 ''，而不是使用 || 运算符时的第二个值 'default'。

nullish 合并运算符与 || 运算符的比较

在前文中，我们已经知道 || 运算符可能会出现问题，因此使用 nullish 合并运算符更为稳妥。

这两个运算符的区别在于当属性值等于假值时的返回值。例如，当我们使用 || 运算符时，属性值为假值时，它会返回后面那个操作数，例如：

const falseValue = false || 'default';
const zeroValue = 0 || 'default';
const emptyValue = '' || 'default';

这三个变量的值都为 'default'。

而使用 nullish 合并运算符，则会返回变量本身，例如：

const falseValue = false ?? 'default';
const zeroValue = 0 ?? 'default';
const emptyValue = '' ?? 'default';

这三个变量的值分别是 false、0 和 ''。

情景示例

下面我们将通过一个情景示例来演示如何使用 nullish 合并运算符。假设我们正在编写一款浏览器插件，当插件不需要时，我们将它的 background 属性设置为 null。

现在，我们需要告诉插件，在不同的设备上，如何显示/隐藏插件。我们的做法是从本地存储 (local storage) 读取设置，并设置默认值。

const settings = JSON.parse(localStorage.getItem('my-plugin-settings')) || {};
const hideOnMobile = settings.hideOnMobile ?? true;
const hideOnTablet = settings.hideOnTablet ?? true;
const hideOnDesktop = settings.hideOnDesktop ?? false;

上述代码中，我们首先读取本地存储的 my-plugin-settings，如果没有找到这个值，我们将其设置为空对象 {}。然后，我们使用 nullish 合并运算符设置默认值。如果设置项不存在，hideOnMobile 和 hideOnTablet 的默认值是 true，而 hideOnDesktop 的默认值是 false。

总结

使用 nullish 合并运算符可以更好地处理属性值等于假值 (0、空字符串、false 等) 的情况，从而提供正确的默认值。

我们建议在编写 JavaScript 代码时，尽量使用 nullish 合并运算符，以避免出现因属性值等于假值而引发的错误。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd50d595b1f8cacdccf830