JavaScript 运算符与表达式：把数据"算"出结果

变量把值存下来了，下一步就是”算”——比较大小、判断真假、拼接文字、做个加法。干这些活的，就是运算符。把变量、值和运算符拼在一起，就构成了一个表达式，表达式一定能算出个结果。

比如 1 + 2 是一个表达式，结果是 3；age >= 18 也是一个表达式，结果是 true 或 false。理解运算符，你才能写出”判断、计算、组合条件”的逻辑。这一篇我们把常用的运算符一次性讲清，并重点戳破几个新手必踩的坑。

算术运算符：做数学

最直观的一类，和数学里差不多：

5 + 2    // 7   加
5 - 2    // 3   减
5 * 2    // 10  乘
5 / 2    // 2.5 除（JS 里除法会保留小数，不是整除）
5 % 2    // 1   取余（模，5 除以 2 余 1）
5 ** 2   // 25  幂（5 的 2 次方）

% 取余特别实用：判断奇偶 n % 2 === 0 就是偶数；判断能不能被整除；甚至做”轮播图到第几张”的循环。

还有两个”自增/自减”运算符：

let n = 1;
n++;      // n 变成 2（自增 1）
n--;      // n 变成 1（自减 1）

++ 和 -- 有”前置”和”后置”的区别，新手常晕：

let a = 1;
console.log(a++);   // 先打印再自增 → 打印 1，之后 a 是 2
console.log(++a);   // 先自增再打印 → a 先变 3，打印 3

一句话：a++ 用旧值、++a 用新值。日常用 a++ 居多，记住这个区别即可。

赋值运算符：把结果存回去

最基础的是 =：

let x = 10;

还有”复合赋值”，把”运算 + 赋值”合成一步，写起来更短：

x += 5;   // 等价于 x = x + 5
x -= 3;   // 等价于 x = x - 3
x *= 2;   // 等价于 x = x * 2
x++;      // 等价于 x = x + 1

这些复合写法在循环累加时天天用，比如 total += price（总价加上当前商品价格）。

比较运算符：比大小、比相等

结果是布尔值（true/false），是条件判断的原材料：

5 > 3     // true   大于
5 < 3     // false  小于
5 >= 5    // true   大于等于
5 === 5   // true   严格相等（类型也要一样）
5 == '5'  // true   宽松相等（会偷偷转类型，不推荐）
5 !== '5' // true   严格不等（类型或值不同都算不等）

⚠️ 再次强调：用 === 和 !==，别用 == 和 !=。== 会做类型转换（5 == '5' 竟然是 true），常常不符合直觉，埋下隐蔽 bug。严格相等要求”类型和值都相同”，结果更可预测。

逻辑运算符：把多个条件拼起来

经常要”同时满足”或”满足一个就行”，用逻辑运算符：

&&（与/并且）：两边都为 true 结果才 true。
||（或/或者）：两边有一个为 true 结果就 true。
!（非/取反）：把 true 变 false、false 变 true。

const age = 20;
const hasTicket = true;

age >= 18 && hasTicket        // true（成年且有票）
age >= 18 || hasTicket        // true（满足一个）
!(age >= 18)                  // false（取反：不成年）

短路求值（超实用技巧）

&& 和 || 有个很妙的特性叫”短路”：

A && B：如果 A 是”假”，直接返回 A，B 根本不执行（因为已经能确定结果是假了）。
A || B：如果 A 是”真”，直接返回 A，B 根本不执行。

利用这个特性，可以写出很简洁的代码：

// 只有 user 存在时才取它的名字（避免报错）
const name = user && user.name;

// 如果 config 里没设端口，就用默认 3000
const port = config.port || 3000;

这在”防止访问不存在对象的属性而报错”时特别常用。不过注意：|| 会把 0、''、false 也都当成”假”而用默认值，如果 0 也是合法值就会出错。更严谨的写法用 ??（空值合并，只在 null/undefined 时才用右边）：

const port = config.port ?? 3000;   // 只有 port 是 null/undefined 才用 3000

三元运算符：一行写 if-else

当逻辑很简单（“条件 ? 真时的值 : 假时的值”），用三元运算符一行搞定：

const status = age >= 18 ? '成年' : '未成年';

等价于：

let status;
if (age >= 18) {
  status = '成年';
} else {
  status = '未成年';
}

三元适合”二选一赋值”这种短逻辑。如果分支里要干很多事，还是用 if/else 更清楚，别硬塞进三元把代码写成长长一行。

字符串拼接的坑

加号 + 遇到字符串会”变脸”成拼接：

'5' + 1      // "51"   字符串 + 数字 = 拼接
1 + 1 + '1'  // "21"   先算 1+1=2，再 "2"+"1"="21"
'1' + 1 + 1  // "111"  先 "1"+"1"="11"，再 "11"+"1"="111"

这就是为什么做数学运算前要确保是数字类型。现代更推荐用模板字符串来拼接，既清晰又不容易错：

const name = '小明';
const age = 18;
// 反引号 ` 包起来，${} 里塞变量
const intro = `我叫 ${name}，今年 ${age} 岁。`;
console.log(intro);   // 我叫 小明，今年 18 岁。

模板字符串（用反引号 ` 包裹，${} 里放表达式）是 ES6 引入的神器，拼 HTML、拼提示语都极方便，强烈推荐。

运算符优先级（了解）

一个表达式里多个运算符，谁先算？和数学一样有优先级：() 最高，然后 * / % 高于 + -，比较运算高于 && 高于 ||。不确定时，加括号最稳：

const result = (age >= 18 && hasTicket) || isVIP;

括号让意图一目了然，也避免记错优先级。

常见新手坑

用 == 而不是 ===：0 == '' 在 JS 里竟然是 true，坑惨无数人。一律 ===。
字符串加法变拼接：'1' + 2 得 "12"，要运算先 Number() 转。
++ 前后置搞混：a++ 先用后加、++a 先加后用，循环里尤其注意。
|| 误伤合法值 0：count || 10 在 count 为 0 时也会用 10，改用 ??。

这一篇你该记住的

算术：+ - * / % **，% 取余很实用，++/-- 有前置（先用后加）和后置（先加后用）之分。
赋值：除了 =，还有 += -= *= 等复合写法。
比较：用 ===/!== 严格比较，拒绝会偷偷转类型的 ==/!=。
逻辑：&&(并且) ||(或者) !(取反)；利用短路写 user && user.name、config.port || 3000（0 是合法值改用 ??）。
三元 条件 ? A : B 一行写二选一；模板字符串 `...${x}...` 拼接比 + 更安全清晰。

下一篇我们讲条件判断——if / else 怎么让程序”看情况办事”，以及 switch、三元、短路这些分支写法。

前端开发