typescript || ?? 区别

在TypeScript（以及JavaScript）中，||（逻辑或操作符）和??（空值合并操作符）都用于处理可能为null或undefined的值，但它们的行为和用途有所不同。

|| 逻辑或操作符

• ||操作符用于逻辑或运算，如果它的第一个操作数是truthy（在JavaScript中，除了false、0、""、null、undefined和NaN之外的所有值都被认为是truthy），则返回第一个操作数；否则，返回第二个操作数。
• 重要的是要注意，||并不严格检查null或undefined，而是检查任何被视为falsy的值。因此，如果你使用||来提供一个默认值，而原始值可能是0、""或false（这些值在JavaScript中被视为falsy），那么这些值将会被错误地替换为默认值。

?? 空值合并操作符

• ??操作符是一个逻辑操作符，它仅当左侧的表达式结果是null或undefined时，才会返回右侧的表达式。
• 它的主要目的是提供一种更直观的方式来为可能为null或undefined的变量提供一个默认值，而不会错误地替换掉那些被认为是falsy但实际上是有意义的值（如0、""或false）。

示例

let a = 0;
let b = a || 5; // b 将会是 5，因为 0 是 falsy
let c = a ?? 5; // c 将会是 0，因为 a 不是 null 或 undefined

let d: string | undefined = undefined;
let e = d || "default"; // e 将会是 "default"，因为 d 是 falsy
let f = d ?? "default"; // f 也会是 "default"，但这里的逻辑更直接地指向了 null 或 undefined 的情况

let g: string | null = null;
let h = g || "default"; // h 将会是 "default"
let i = g ?? "default"; // i 也会是 "default"，但使用 ?? 更清晰地表达了意图

总结来说，虽然||和??在某些情况下看起来可以互换使用，但??在处理可能为null或undefined的值时提供了更精确的控制，并且不会错误地替换掉那些被认为是falsy但实际上有意义的值。