表达式与运算符：让数据真正参与计算

购物车要算总价，游戏要更新分数，登录页要判断账号和密码是否都已填写。表面上，这些需求很不一样，落到 JavaScript 里却都离不开同一套工具：表达式负责产生值，运算符负责规定怎样计算这些值。

真正容易出错的地方通常不是运算符长什么样，而是它们碰到不同类型时会怎么做：+ 有时相加、有时拼接；== 会悄悄转换类型；&& 和 || 甚至不保证返回布尔值。只要把这些规则看清楚，许多“JavaScript 为什么这样算”的疑问都会消失。

本章会用可以直接运行的小例子建立一套读表达式的方法。你不仅会算出答案，还会判断变量是否被修改、右侧代码是否执行，以及怎样把含糊的写法改得更可靠。

学习路线

完成本章后，你应该能够：

• 识别表达式的结果值，并区分“求值”和“副作用”；
• 使用算术、取余和幂运算解决实际计算问题；
• 用复合赋值更新变量，解释前置与后置自增的差别；
• 根据优先级、结合性和括号判断计算顺序；
• 使用严格相等与关系运算符得到可靠的布尔结果；
• 解释 &&、||、!、?? 的短路规则；
• 用条件表达式在两个结果之间作出选择。

先看结果：表达式怎样工作

表达式是一段求值后会得到结果的代码。字面量 42 会得到数字 42，变量读取 price 会得到变量当前保存的值，price * count 会得到乘法结果，函数调用 getTotal() 也会得到函数返回值。

读表达式时，可以把它想成一台求值机：输入代码，按照规则计算，最后交出一个值。

下面从一笔订单开始：

const price = 12;
const count = 3;
const total = price * count;
 
console.log(total);
console.log(total >= 30);
console.log(total >= 30 ? "可包邮" : "继续凑单");

输出：

36
true
可包邮

这段代码包含三类结果：

1. price * count 得到数字 36；
2. total >= 30 得到布尔值 true；
3. 条件 ? 值 A : 值 B 根据条件选择字符串 "可包邮"。

结果值与副作用不是一回事

有些表达式只读取和计算，例如 price * count。另一些表达式在产生结果的同时，还会改变程序状态或影响外部环境，这种额外影响叫作副作用。

let score = 10;
 
const updatedScore = (score += 5);
const logResult = console.log(updatedScore);
 
console.log(score);
console.log(logResult);

输出：

15
15
undefined

score += 5 不仅得到新值 15，还把 score 改成了 15。console.log(updatedScore) 会向控制台输出内容，这也是副作用；它本身的返回值是 undefined，因此最后一行输出 undefined。

算术运算：把数据变成结果

JavaScript 使用熟悉的符号完成基本计算：

取余关心“还剩多少”

% 常被口头叫作“取模”，在 JavaScript 中更准确地说，它计算的是余数。例如 125 分钟可以拆成 2 个完整小时，再剩 5 分钟：

const totalMinutes = 125;
const hours = Math.floor(totalMinutes / 60);
const minutes = totalMinutes % 60;
 
console.log(hours);
console.log(minutes);
console.log(`${hours} 小时 ${minutes} 分钟`);

输出：

2
5
2 小时 5 分钟

取余还适合判断奇偶：整数 n % 2 === 0 时，n 是偶数。

加号为什么有两种结果

+ 同时承担数字加法和字符串连接两项工作。两边都是数字时，它进行加法；只要运算进入字符串连接场景，结果就会拼成字符串。

数据类型决定了加号走向“数字相加”还是“字符串连接”。

console.log(5 + 2);
console.log("5" + 2);
console.log("总数：" + 5 + 2);
console.log(5 + 2 + " 件");

输出：

7
52
总数：52
7 件

表达式会按顺序逐步求值。"总数：" + 5 先得到字符串 "总数：5"，再连接 2；而 5 + 2 会先算出数字 7，然后才与 " 件" 连接。

减法、乘法和除法没有“连接字符串”的含义，因此会尝试把操作数转成数字：

console.log("5" - 2);
console.log("5" * 2);
console.log("hi" * 2);
console.log(Number("5") + 2);

输出：

3
10
NaN
7

NaN 表示某次数字运算没有得到有效数字。它仍属于 JavaScript 的 number 类型，但不等于任何值，甚至不等于自己。判断一个结果是否为 NaN 时，应使用 Number.isNaN(value)。

除以零不会抛出异常

普通数字除以零会得到无穷值，0 / 0 则得到 NaN：

console.log(5 / 0);
console.log(-5 / 0);
console.log(0 / 0);

输出：

Infinity
-Infinity
NaN

这些结果不会自动中断程序。涉及比例、均价或速度时，要在计算前确认除数不是零，并检查最终结果是否为有限数字，例如 Number.isFinite(result)。

赋值与自增：安全地更新变量

赋值运算符 = 会先计算右侧，再把结果保存到左侧变量。不要把它和比较混淆：= 是“保存”，=== 才是“严格比较”。

当新值依赖旧值时，可以使用复合赋值：

let points = 10;
 
points += 5;  // points = points + 5
points *= 2;  // points = points * 2
points -= 4;  // points = points - 4
points %= 7;  // points = points % 7
 
console.log(points);

输出：

5

计算过程依次是 10 → 15 → 30 → 26 → 5。常用复合赋值还包括 /= 和 **=。

const 声明的变量不能再次赋值，因此下面的更新必须使用 let：

const start = 10;
// start += 1; // TypeError: Assignment to constant variable.
 
let current = start;
current += 1;
console.log(current);

输出：

11

前置与后置自增差在“交出哪个值”

++ 把变量加 1，-- 把变量减 1。单独占一行时，前置和后置都会完成同样的更新：

let level = 2;
level++;
console.log(level);

输出：

3

差别出现在自增表达式的结果被立即使用时：

let n = 2;
 
console.log(n++); // 先交出旧值 2，再把 n 改成 3
console.log(n);   // 3
console.log(++n); // 先把 n 改成 4，再交出新值 4

输出：

2
3
4

可以把规则压缩成一句话：

• n++：表达式得到旧值，变量随后加 1；
• ++n：变量先加 1，表达式得到新值。

优先级与结合性：复杂表达式先算谁

一个表达式出现多个运算符时，JavaScript 不会简单地从左到右全部计算。优先级决定哪一类运算先分组，结合性决定同一优先级从哪一侧组合。

不必死背完整表格，但要记住常用层级，并在意图可能含糊时加括号。

本章常见运算符可以先掌握这条简化顺序：

先看最常见的乘加组合：

console.log(2 + 3 * 4);
console.log((2 + 3) * 4);

输出：

14
20

第一行先算乘法；第二行用括号明确要求先算加法。

同级运算不一定都从左向右

加减、乘除通常左结合：

console.log(20 / 5 * 2); // (20 / 5) * 2
console.log(10 - 3 - 2); // (10 - 3) - 2

输出：

8
5

幂运算 ** 是右结合：

console.log(2 ** 3 ** 2);   // 2 ** (3 ** 2)
console.log((2 ** 3) ** 2);

输出：

512
64

括号不仅能改变结果，也能记录意图。即使你知道优先级，isMember && (total >= 99) 也可能比不加括号更容易快速读懂。

下面的交互实验可以逐步观察表达式如何分组：

比较运算：把关系变成布尔值

比较表达式只会得到 true 或 false，因此它们经常充当条件。大小比较使用 >、>=、<、<=，相等比较优先使用 === 和 !==。

const stock = 8;
const requested = 5;
 
console.log(stock > requested);
console.log(stock >= requested);
console.log(requested === 5);
console.log(requested !== 0);

输出：

true
true
true
true

注意 > 与 >= 的边界不同。两边相等时，> 是 false，>= 是 true。

严格相等让类型边界可见

== 和 != 会在比较时尝试类型转换；=== 和 !== 同时检查类型和值。默认使用严格比较，读代码的人就不必猜测转换过程。

const numericId = 5;
const textId = "5";
 
console.log(numericId == textId);
console.log(numericId === textId);
console.log(numericId != textId);
console.log(numericId !== textId);

输出：

true
false
false
true

两个特殊边界也值得记住：

console.log(null == undefined);
console.log(null === undefined);
console.log(NaN === NaN);
console.log(Number.isNaN(NaN));

输出：

true
false
false
true

字符串比较按字符顺序进行

两个字符串比较大小时，会按字符的 Unicode 顺序逐位比较，不会自动理解成十进制数字：

console.log("9" < "10");
console.log(Number("9") < Number("10"));
console.log("apple" < "banana");

输出：

false
true
true

"9" < "10" 首先比较字符 "9" 和 "1"，所以结果与数字比较不同。输入本来代表数字时，先显式转换再比较。

逻辑运算：组合条件并利用短路

单个比较只能回答一个问题，逻辑运算符可以把多个条件组合起来：

• a && b：两边都满足时，整体才满足；
• a || b：至少一边满足时，整体就满足；
• !a：把真假性反转。

const age = 20;
const hasTicket = true;
const isBanned = false;
 
console.log(age >= 18 && hasTicket);
console.log(hasTicket || age < 12);
console.log(!isBanned);

输出：

true
true
true

! 的优先级高于 && 和 ||。取反一个完整条件时，用括号明确范围：

console.log(!(age < 18));

真假性不只属于布尔值

逻辑运算会先判断操作数的真假性。以下值属于假值：

• false；
• 0、-0 和 0n；
• 空字符串 ""；
• null 和 undefined；
• NaN。

除此之外的值通常都是真值，包括字符串 "0"、空数组 [] 和空对象 {}。

console.log(Boolean(0));
console.log(Boolean("0"));
console.log(Boolean([]));
console.log(!"");

输出：

false
true
true
true

&& 和 || 会返回操作数

逻辑运算符并不总是返回 true 或 false。它们先利用真假性决定求值流程，再返回其中一个原始操作数：

• a && b：a 为假时返回 a；否则继续求值并返回 b；
• a || b：a 为真时返回 a；否则继续求值并返回 b。

这就是短路求值：左侧已经足以决定选择哪个值时，右侧不会执行。

短路求值先检查左侧是否足以决定结果；严格相等则同时检查类型和值。

function mark(label, value) {
  console.log(`计算${label}`);
  return value;
}
 
console.log(mark("左", "") || mark("右", "匿名"));
console.log(mark("左", false) && mark

输出：

计算左
计算右
匿名
计算左
false

第一组的左侧是空字符串，|| 必须继续计算右侧。第二组的左侧已经是假值，&& 直接返回 false，所以没有出现 计算右。

?? 只处理真正缺失的值

|| 把所有假值都视为需要备用值，可能误伤合法的 0、"" 和 false。空值合并运算符 ?? 只在左侧是 null 或 undefined 时使用右侧。

console.log(0 || 18);
console.log(0 ?? 18);
console.log("" || "未命名");
console.log("" ?? "未命名");
console.log(null ?? "未命名");

输出：

18
0
未命名
 
未命名

第四次输出的是空字符串，因此控制台会看到一个空行。只要 0、空字符串或 false 是合法业务值，就优先考虑 ??。

条件表达式在两个结果中选择一个

条件表达式写作 条件 ? 条件为真时的值 : 条件为假时的值。它本身会产生值，因此适合完成简短、清晰的二选一：

const total = 120;
const shippingLabel = total >= 99 ? "免运费" : "运费 8 元";
 
console.log(shippingLabel);

输出：

免运费

如果每个分支需要执行多条语句，或者条件不断嵌套，就应改用更容易阅读的 if...else。条件表达式的优势是产生一个值，而不是压缩所有控制逻辑。

下面的实验台可以切换不同输入，观察 &&、|| 和 ?? 是否继续计算右侧：

综合实践：生成购物车结算摘要

现在把本章的运算符组合起来，完成一个小型结算程序。程序接收字符串形式的单价和数量，计算小计，根据会员与优惠码决定折扣，再判断是否免运费。

初始数据

const rawUnitPrice = "39.9";
const rawQuantity = "3";
const couponCode = "SAVE10";
const isMember = true;

实现步骤

1. 使用 Number() 把单价和数量转换成数字；
2. 检查单价与数量都是有限数字，并且单价大于 0、数量是正整数；
3. 用乘法算出小计 subtotal；
4. 当优惠码严格等于 "SAVE10" 或者用户是会员时，折扣率为 0.1，否则为 0；
5. 用复合赋值从总额中减去折扣；
6. 折扣前小计达到 99 元时免运费，否则加 8 元运费；
7. 输出小计、折扣、运费和最终应付金额，金额保留两位小数。

const rawUnitPrice = "39.9";
const rawQuantity = "3";
const couponCode = "SAVE10";
const isMember = true;
 
const unitPrice = Number(rawUnitPrice);
const quantity = Number(rawQuantity);
 
const hasValidPrice = Number.isFinite(unitPrice) && unitPrice > 0;

验收标准

• 使用给定初始数据时，应付金额为 ¥107.73；
• 把 couponCode 改为 "NONE" 且 isMember 改为 false 后，折扣应为 ¥0.00；
• 把数量改为 "2"、关闭折扣后，小计应为 ¥79.80，运费应为 ¥8.00；
• 把数量改为 "0"、"2.5" 或 "hello" 时，应输出输入无效提示；
• 判断相等时使用 ===，计算前不依赖字符串的隐式转换。

进一步挑战：把免运费门槛、折扣率和默认运费提取成命名常量，再观察表达式是否更容易读懂。

本章自测

总结

• 表达式会产生值；赋值和函数调用还可能带来副作用。
• + 既能做数字加法，也能连接字符串；数学输入应先显式转换。
• % 得到余数，适合拆分周期和判断奇偶，但负数结果可能为负。
• 复合赋值会基于旧值计算并保存新值；后置自增交出旧值，前置自增交出新值。
• 优先级决定先分组谁，结合性决定同级如何组合；括号可以直接表达意图。
• 比较会产生布尔值，日常相等判断优先使用 === 和 !==。
• &&、|| 会短路并返回操作数，! 根据真假性取反。
• ?? 只处理 null 和 undefined，需要保留 0、空字符串或 false 时比 || 更合适。

输出：