JavaScript运算符优先级：什么时候该用括号？

文章概览：JavaScript 运算符优先级与括号使用决策核心体系

一、优先级与结合性：引擎如何阅读你的代码

当 JavaScript 引擎（如 V8）解析一段表达式时，它并不会单纯地“从左向右”机械计算。引擎依赖两套底层规则构建抽象语法树（AST）：优先级（Precedence）和结合性（Associativity）。

• 优先级（Precedence）：决定在多个不同运算符相邻时，哪个运算符优先与操作数“绑定”。JavaScript 规范定义了 20 个等级，优先级数值越高（最高等级 19 为圆括号分组），绑定越紧密。
• 结合性（Associativity）：当相邻的运算符优先级相同时，决定运算的先后方向。绝大多数运算符是左结合（如加减法从左至右），而赋值运算符 =、三元运算符 ? : 以及指数运算符 ** 是右结合。
• 分组运算符 ( )：它的优先级高达 19 级（仅次于部分成员访问与函数调用），它的作用是将内部子表达式打包为一个不可分割的计算单元，从而从物理上改写 AST 的节点层级。

图 1：圆括号如何改变抽象语法树（AST）的构建层级与求值路径

如图 1 所示，在 a + b * c 中，乘法符号优先级高于加法，因此 b * c 会作为加法运算符的右子节点先求值；而一旦加上括号 (a + b) * c，加法节点被提至底层作为优先子树，加法结果再传递给乘法。

二、语法强制：不加括号直接报错的硬性场景

ECMAScript 规范为了杜绝潜在的歧义设计，在某些运算符共存时做出了严苛的语法限制。在这些场景下，不写括号并不是“结果是否符合预期”的问题，而是代码会直接抛出 SyntaxError 无法通过编译。

1. 空值合并运算符 ?? 与逻辑与 && / 逻辑或 || 混用

ECMAScript 2020 引入空值合并运算符 ?? 时，标准委员会明确意识到开发者极易混淆 ?? 与 || 的优先级与短路语义。因此规范明文规定：?? 不能在没有括号的情况下与 && 或 || 直接相邻混用。

// ❌ 抛出 SyntaxError: Unexpected token '??'
const result = value ?? defaultValue || fallback;

// ❌ 同样抛出 SyntaxError
const flag = hasPermission && user ?? defaultUser;

// ✅ 合法：使用括号明确结合意图
const result1 = (value ?? defaultValue) || fallback;
const result2 = value ?? (defaultValue || fallback);

2. 幂运算符 ** 与一元运算符混用

在数学书写中，\(-2^2\) 的含义往往存在分歧（是 \((-2)^2 = 4\) 还是 \(-(2^2) = -4\)）。JavaScript 引擎为了避免这种数学歧义，禁止将一元运算符（如 -、+、!、~）直接放在幂运算符 ** 之前。

// ❌ 抛出 SyntaxError: Unary operator used immediately before exponentiation expression
const val = -2 ** 2;

// ✅ 明确意图一：计算负数的偶次幂（结果为 4）
const val1 = (-2) ** 2;

// ✅ 明确意图二：计算幂之后取相反数（结果为 -4）
const val2 = -(2 ** 2);

3. 立即执行函数表达式（IIFE）与箭头函数返回对象字面量

函数声明不能直接作为表达式执行，而箭头函数的花括号在语法上优先被识别为函数体复合语句块，而非对象字面量。在这些场景中，圆括号是语法转化的必需品：

// ❌ 抛出 SyntaxError: Function statements require a function name
function() { console.log('init'); }();

// ✅ 合法：括号将函数声明转换为函数表达式
(function() {
  console.log('init');
})();

// ❌ 语法误解：花括号被解析为代码块，返回 undefined
const getUser = (id) => { id: id, status: 'active' };

// ✅ 合法：括号告知引擎此处是一个完整的对象表达式
const getUser = (id) => ({ id: id, status: 'active' });

三、典型隐患：不报错但极易引发 Bug 的运算陷阱

语法错误至少能在编译或构建期被拦截，最危险的是语法合法、能够正常运行，但运行结果因优先级反直觉而彻底偏离预期。以下四个场景是前端生产环境中高频出现的暗坑。

图 2：字符串拼接与三元运算符混用时的隐蔽求值推导过程

1. 字符串拼接 + 与三元运算符 ? :

这是最经典的业务逻辑崩溃点。加号 + 的优先级为 13，而三元运算符 ? : 的优先级仅为 3。如果拼接字符串时不加括号，引擎会先把前方的字符串与三元运算符的判断条件完成拼接！

const isValid = false;

// ❌ 严重错误写法
const msg = 'User status: ' + isValid ? 'Online' : 'Offline';
console.log(msg); // 示例输出: 'Online' （期待是 'Offline'！）

// 推导原因：
// 第一步：'User status: ' + false => 'User status: false'
// 第二步：'User status: false' ? 'Online' : 'Offline'
// 第三步：非空字符串转换为布尔值为 true，因此恒定返回 'Online'！

// ✅ 正确写法：给三元运算加上隔离括号
const safeMsg = 'User status: ' + (isValid ? 'Online' : 'Offline');
console.log(safeMsg); // 示例输出: 'User status: Offline'

2. 位运算符 & / | 与全等比较符 ===

在权限系统或标志位（Bitwise Flags）判断中，常常需要使用按位与 &。然而，在 C 语言传承下来的语法体系中，相等性比较运算符 ===（优先级 9）优先于按位与 &（优先级 8）。

const FLAG_READ = 1; // 0001
const userPermission = 2; // 0010（没有读取权限）

// ❌ 逻辑完全失效的写法：
if (userPermission & FLAG_READ === FLAG_READ) {
  console.log('允许读取');
}
// 内部推导：
// 1. 先计算 FLAG_READ === FLAG_READ，得出 true
// 2. 表达式变为 userPermission & true
// 3. 在位运算中 true 转换为 1，结果为 2 & 1 = 0
// 如果换成 userPermission = 1，则 1 & 1 = 1（真），看似碰巧正确，实则埋下定时炸弹！

// ✅ 必须加括号：确保位运算优先完成
if ((userPermission & FLAG_READ) === FLAG_READ) {
  console.log('安全读取验证');
}

3. 逻辑与 && 与逻辑或 || 的混合求值

在数学逻辑中，乘法对应“与”，加法对应“或”。因此，JavaScript 中 &&（优先级 5）高于 ||（优先级 4）。但人类阅读自然语言时，习惯从左往右理解，极容易将其误判为左结合的线性链条。

const isAdmin = false;
const isEditor = true;
const hasValidToken = false;

// 读者初看可能会以为：如果我是管理员或者编辑，只要有 Token 就能进入
// 但在引擎眼里，这其实是：如果是管理员，或者（既是编辑且持有有效Token）
const canAccess = isAdmin || isEditor && hasValidToken;
// 实际求值等同于：isAdmin || (isEditor && hasValidToken) => false

// ✅ 防御性写法：无论你的业务意图是哪种，都必须显式使用括号！
const planA = (isAdmin || isEditor) && hasValidToken; // 意图 1：角色满足其一且凭证有效
const planB = isAdmin || (isEditor && hasValidToken); // 意图 2：特权直接放行，编辑需凭证

图 3：四类典型优先级陷阱特征与防御写法矩阵

4. 连续关系比较符的数学假象

初学者常常在判断数值区间时写出类似数学不等式的代码：if (0 < value < 100)。在 JavaScript 中，比较运算符是左结合的，这会导致计算出极其荒谬的结果：

const value = 200;

// ❌ 荒谬判断：恒为 true！
if (0 < value < 100) {
  console.log('在区间内'); // 示例输出: '在区间内'
}
// 推导原因：
// 1. 先计算 0 < 200 => true
// 2. 表达式变为 true < 100
// 3. 比较时布尔值 true 被转为数字 1，1 < 100 永远为 true！

// ✅ 正确写法：拆分为独立的逻辑断言
if (value > 0 && value < 100) {
  console.log('真正的区间判断');
}

四、什么时候可以省略括号？保持代码清爽

知道了括号的重要性，并不意味着要在每一处代码中堆砌括号。“括号泛滥”（Parentheses Pollution）同样会严重破坏代码的视觉流与可读性。在以下场景中，完全可以放心省略括号：

五、工程决策树：什么时候该用括号？

编写工业级代码时，我们不需要将 20 级运算符优先级表倒背如流。相反，团队应当遵循防御性加括号（Defensive Parentheses）的工程准则。

图 4：JavaScript 运算符括号决策树与团队工程规范指南

三步决策口诀

1. 一看语法禁区：只要出现 ?? 与逻辑与或、负数幂运算、箭头函数返回对象字面量，必须立刻加括号。
2. 二看跨界混用：只要一个表达式中混用了不同类别的运算符（三元拼接、位运算与全等、逻辑与或混合），坚决加上括号，不要挑战人类大脑的结合性记忆。
3. 三看算术纯度：如果只是单一类别或符合小学数学认知的四则运算与简单赋值，大胆省略括号，还原代码的清爽与优雅。