SyntaxError: cannot use `??` unparenthesized within `||` and `&&` expressions

当在同一个表达式中使用 空值合并运算符逻辑或逻辑与 且不使用括号时,会发生 JavaScript 异常 "无法在 ||&& 表达式中使用未加括号的 ??"。

消息

SyntaxError: Unexpected token '??' (V8-based)
SyntaxError: cannot use `??` unparenthesized within `||` and `&&` expressions (Firefox)
SyntaxError: Unexpected token '??'. Coalescing and logical operators used together in the same expression; parentheses must be used to disambiguate. (Safari)

错误类型

哪里出错了?

运算符优先级链如下所示

|   >   &&   >   ||   >   =
|   >   ??   >   =

但是,??&&/|| 之间的优先级故意未定义,因为逻辑运算符的短路行为会使表达式的计算变得不直观。因此,以下组合都是语法错误,因为语言不知道如何对操作数加括号

js
a ?? b || c;
a || b ?? c;
a ?? b && c;
a && b ?? c;

相反,通过显式地为任一侧加括号来明确你的意图

js
(a ?? b) || c;
a ?? (b && c);

示例

在迁移使用 ||&& 来防止 nullundefined 的旧代码时,你可能会部分地进行转换

js
function getId(user, fallback) {
  // Previously: user && user.id || fallback
  return user && user.id ?? fallback; // SyntaxError: cannot use `??` unparenthesized within `||` and `&&` expressions
}

相反,考虑为 && 加括号

js
function getId(user, fallback) {
  return (user && user.id) ?? fallback;
}

更好的是,考虑使用 可选链 而不是 &&

js
function getId(user, fallback) {
  return user?.id ?? fallback;
}

另请参阅