在前端开发中，我们经常需要对变量进行类型判断、空值判断等处理。在过去，我们一般使用 || 运算符来判断一个值是否为 undefined 或 null，如下所示：
const name = undefined; const fullName = name || "default name"; console.log(fullName);
以上代码的输出结果为 default name。
但是，当 name 取到一个假值（如 0、false、"" 等）时，fullName 的值也会被设置为 default name，这显然不是我们期望的结果。为了解决这个问题，ES10 新增了 Nullish Coalescing 运算符 ??。
Nullish Coalescing 运算符的使用
Nullish Coalescing 运算符 ?? 的使用方式非常简单，它的作用是检查一个值是否为 null 或 undefined。如果是 null 或 undefined，结果就为右侧的默认值，否则结果就为该值本身。例如：
const name = null; const fullName = name ?? "default name"; console.log(fullName);
以上代码的输出结果为 default name。
在上面的例子中，因为 name 的值为 null，所以 fullName 的值被设置为了默认值 default name。而如果把 name 的值设为非空字符串或数字，fullName 的值就会取到 name 的值。例如：
const name = "John"; const fullName = name ?? "default name"; console.log(fullName);
以上代码的输出结果为 John。
Nullish Coalescing 运算符和普通或运算符的区别
Nullish Coalescing 运算符 ?? 和普通的或运算符 || 有什么区别呢？在上面的例子中，我们已经看到了它们之间的一些差异。具体来说，它们之间的区别如下：
- 当左侧的值是 null 或 undefined 时，
??运算符才会执行右侧的表达式； - 当左侧的值是任何“假值”（如 0、false、"" 等）时，
??和||都会执行右侧的表达式； - 当左侧的值是任何“真值”（如非空字符串、非零数字等）时，
??和||都会返回左侧的值。
换句话说，?? 运算符不仅仅可以帮我们检查变量是否为 null 或 undefined，而且还可以避免与“假值”混淆。
总结
在实际的前端开发中，我们常常会遇到需要对变量进行类型判断、空值判断等处理的情况。在过去，我们一般使用 || 运算符来判断一个值是否为 undefined 或 null，但是这种方式存在一些限制。ES10 新增的 Nullish Coalescing 运算符 ??，可以避免与“假值”混淆，更加准确地检查变量是否为 null 或 undefined。在实际开发中，我们应该适时地使用这个新的运算符，以提高代码的健壮性和可读性。
示例代码
-- -------------------- ---- ------- ----- ----- - ---------- ----- ----- - ----- ----- ----- - --- ----- ----- - ------ ----- ----- - -- ----- ----- - ------ ----------------- -- -------- ------- -- -------- ----- ----------------- -- -------- ------- -- -------- ----- ----------------- -- -------- ------- -- -- ----------------- -- -------- ------- -- ----- ----------------- -- -------- ------- -- - ----------------- -- -------- ------- -- -----
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a19a99add4f0e0ff9a8d66