在前端开发中，我们经常需要在代码中判断某个值是否为空，如果为空则使用默认值。在早期的 JavaScript 版本中，我们通常使用短路运算符来实现这个功能，例如：
const username = getUserName() || '未登录';
然而，这种方法存在一个问题，当 getUserName() 返回一个空字符串或 0 等 falsy 值时，也会被认为是空值，导致使用了默认值。为了解决这个问题，ECMAScript 2020 引入了 Nullish Coalescing Operator（空值合并运算符）。
Nullish Coalescing Operator 简介
Nullish Coalescing Operator 使用 ?? 表示，它的功能是在左侧操作数所代表的值为 null 或 undefined 时返回右侧操作数，否则返回左侧操作数。
const foo = null ?? '默认值'; // '默认值' const bar = undefined ?? '默认值'; // '默认值' const baz = 0 ?? '默认值'; // 0
因此，与短路运算符不同，Nullish Coalescing Operator 只在遇到 null 或 undefined 时进行取值操作，并将其他 falsy 值当作合法的值，这样避免了使用默认值的错误情况。
如何使用 Nullish Coalescing Operator 进行代码维护
Nullish Coalescing Operator 在代码维护中具有很好的应用价值。例如，在开发复杂的表单时，常常需要为表单元素设置默认值，而且表单元素有可能是为空值的。
<input type="text" id="username" value="">
在早期的 JavaScript 版本中，我们可以使用短路运算符为表单元素设置默认值：
const username = document.getElementById('username').value || '请输入您的用户名';然而，当表单元素的值为 0 或空字符串时会出现意料之外的情况。使用 Nullish Coalescing Operator 可以避免这种情况的发生：
const username = document.getElementById('username').value ?? '请输入您的用户名';通过与短路运算符的比较，可以看出 Nullish Coalescing Operator 更加直观，有效地解决了短路运算符存在的问题。
示例代码
为了更好地理解 Nullish Coalescing Operator 的用法，下面是一个使用示例：
function greetUser(name) {
return `Hello, ${name ?? 'anonymous'}!`;
}
console.log(greetUser()); // 'Hello, anonymous!'
console.log(greetUser('Alice')); // 'Hello, Alice!'在这个例子中，我们定义了一个 greetUser() 函数，它的功能是向用户问候。如果用户的名字为空值，就使用 "anonymous" 代替。在调用 greetUser() 函数时，我们传递了一个名字参数，可以看到函数的输出会根据传入参数的不同而发生变化。
结论
Nullish Coalescing Operator 是 ECMAScript 2020 中引入的一个新特性，它可以在 JavaScript 中更有效地处理空值。与短路运算符相比，Nullish Coalescing Operator 更加直观，避免了遗漏某些 falsy 值的情况。在实际的代码维护中，Nullish Coalescing Operator 可以帮助我们更好地处理空值情况，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67098079d91dce0dc8796ffb