|| 和 ?? 运算符之间的区别

Question

JS中??和||的区别是什么？

const a = {}

const b = a.name ?? 'varun 1'

console.log(b)

const d = a.name || 'varun 2'

console.log(d)

在上面的代码中，它们都是一样的。我知道||表示或者，即如果第一个语句为false，则设置下一个语句的值。对于??也是一样吗？

- Cyberduck

---

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator - shree.pat18

尝试使用 const a = {name: 0}。 - georg

Answer 1

主要区别在于 nullish coalescing(??) 运算符仅在左操作数为 null 或 undefined 时才将结果返回为右操作数。

而 OR(||) 运算符将在左操作数为任何“假值”时将结果返回为右操作数。

以下是一些示例

• 片段1：使用 0 作为输入

const a = 0;
// a || 10 --> Will result in 10, as || operator considers 0 as falsy value and resulting the right side operand
console.log(`a || 10 = ${a || 10}`);
// a ?? 10 --> Will result in 0, as ?? operator considers 0 as truthy value and resulting the left side operand
console.log(`a ?? 10 = ${a ?? 10}`);

• 代码段 2：使用''作为输入

const a = ''
console.log(`a || "ABC" = ${a || "ABC"}`); // ABC
console.log(`a ?? "ABC" = ${a ?? "ABC"}`); // ''

• 代码片段3：使用 null 作为输入参数

const a = null;
console.log(`a || 10 = ${a || 10}`); // 10
console.log(`a ?? 10 = ${a ?? 10}`); // 10

• 片段 4：使用 undefined 作为输入

const a = {}
// Here a.name will be undefined, hence both of the operands results the right side operand
console.log(`a.name ?? 'varun 1' = ${a.name ?? 'varun 1'}`); // 'varun 1'
console.log(`a.name || 'varun 2' = ${a.name || 'varun 2'}`); // 'varun 2'

const a = {name: ''}
// Here a.name will be '', then

// ?? will result ''
console.log(`a.name ?? 'varun 1' = ${a.name ?? 'varun 1'}`);
// || will result in 'varun 2'
console.log(`a.name || 'varun 2' = ${a.name || 'varun 2'}`);

• 片段5：使用false作为输入参数

const a = false;
console.log(`a || 10 = ${a || 10}`); // 10
console.log(`a ?? 10 = ${a ?? 10}`); // false

如上所述，当输入值为null或undefined时，两个运算符的行为相似。真正的区别在于当我们提供falsy值，例如0、''、false和NaN时，才能看到。

- Nithish

---

?? 和 || 的主要区别在于它们处理假值的方式。?? 只将 null 和 undefined 视为 nullish，而 || 则将任何假值视为可能为 false。总结一下，当你希望专门处理 null 或 undefined 时，请使用 nullish coalescing operator ??；当你希望处理任何假值（包括 null 和 undefined）时，请使用逻辑 OR operator ||。 - Chidiebere Ezeokwelume

Answer 2

您可以看到一个差异

const a = ''

const b = a ?? 'varun 1'

console.log(b)

const d = a || 'varun 2'

console.log(d)

因为a ?? 'varun 1'仅在a为null或undefined时返回'varun 1'，但a || 'varun 2'如果a为假值，则返回'varun 2'。一些假值包括空字符串、零和布尔值false。

- user15388024