JavaScript 算术
你已经有了运算符家族地图。本课深入 算术家族——主要对 数字 运算并返回新值的符号。你会练习 + - * / %,用括号控制顺序,用 ++ 和 -- 移动计数器,用 幂运算符 求幂,并修好经典陷阱:当 + 拼接文本而不是相加时。
什么是算术运算符?
算术运算符告诉 JavaScript 去 计算。参与运算的值仍叫 操作数。在 12 / 4 中,/ 是运算符,12 和 4 是操作数。结果可以存起来、打印到控制台,或显示在页面上。
五个日常运算符
📊 日常算术运算符
| 运算符 | 作用 | 示例结果 |
|---|---|---|
+ |
加 | 7 + 3 → 10 |
- |
减 | 7 - 3 → 4 |
* |
乘 | 7 * 3 → 21 |
/ |
除 | 7 / 2 → 3.5 |
% |
除后余数 | 7 % 3 → 1 |
把这张表放在手边。/ 可能得到小数。% 不是「百分号」——它是 余数。
console.log(20 + 4);
console.log(20 - 4);
console.log(20 * 4);
console.log(20 / 4);
console.log(20 % 4);
console.log(20 / 3);
用 % 做余数模式
% 回答:「除完还剩什么?」这个余数适合判断 奇偶,以及「每隔 N 个」的逻辑。
console.log(8 % 2);
console.log(9 % 2);
console.log(15 % 5);
console.log(17 % 5);
let n = 12;
console.log(n % 2 === 0);
8 % 2 是 0(偶数)。9 % 2 是 1(奇数)。常见偶数检测:n % 2 === 0。以后会在循环里用到余数;这里先会读余数即可。
优先级与括号
JavaScript 并不总是严格从左到右计算。乘除通常 先于 加减。括号强制你想要的顺序——先读 (…) 里面。
console.log(2 + 3 * 4);
console.log((2 + 3) * 4);
console.log(10 - 6 / 2);
console.log((10 - 6) / 2);
没有括号时,2 + 3 * 4 是 14(先乘)。写成 (2 + 3) * 4 得到 20。价格或公式里顺序重要时,请刻意写括号。
++、-- 与幂运算符
++ 给数字变量加一。-- 减一。幂运算符 是 幂运算。还不熟练时,清晰写法 n = n + 1 也完全正确;循环里会经常看到 ++。
let lives = 3;
lives++;
console.log(lives);
lives--;
console.log(lives);
console.log(2 ** 3);
console.log(5 ** 2);
lives++ 之后值是 4。2的3次方 是 8。5的2次方 是 25。像 += 这类简写属于下一课 赋值——这里先专注计算符号。
当 + 拼接而不是相加
若 + 任意一侧是 字符串,JavaScript 常常会 拼接。本意是相加时,用 Number(...) 转换。
console.log("5" + 2);
console.log(Number("5") + 2);
console.log(5 + Number("2"));
let a = "10";
let b = "3";
console.log(Number(a) + Number(b));
"5" + 2 变成 "52"。Number("5") + 2 变成 7。这和类型转换是同一思路——表单和页面文字里经常遇到。
在页面上显示合计
算一笔小账单,用余数作提示,并把结果写到页面上。
<!DOCTYPE html>
<html>
<head>
<title>Arithmetic — page total</title>
</head>
<body>
<p id="out">…</p>
<script>
let price = 12;
let qty = 3;
let shipping = 4;
let total = price * qty + shipping;
let leftover = total % 5;
let box = document.getElementById("out");
box.textContent = "total=" + total + " · rem5=" + leftover;
</script>
</body>
</html>
这里 * 先于 +,所以 12 * 3 + 4 → 40。40 % 5 是 0。改 price、qty 或 shipping,刷新后确认两个数字。
自己试试
- 打印
14 + 5、14 - 5、14 * 5、14 / 5和14 % 5。 - 用
%和=== 0判断22是否为偶数。 - 对比
1 + 2 * 3与(1 + 2) * 3。 - 从
let c = 0开始,执行两次c++,再打印c。 - 打印 3的3次方 和
Number("8") + 1。 - 在 HTML 演示里只改
qty,刷新后读新的合计与余数。
常见错误
- 把
%当成「百分号」——它是 余数 - 以为
+总会相加——字符串一侧常常 拼接 - 忘记括号,却又不想让乘除抢先
- 把
++(改一)和=(存任意值)搞混 - 对展示用字符串做运算,而不是对原始数字
小结
- 算术运算符:
+-*/% %是余数——适合奇偶与「每隔 N」- 括号控制优先级;通常
*/先于+- ++/--每次改一;幂运算符 求幂- 当
+拼接时使用Number() - 下一课:赋值——用
=及同类符号存储与更新
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己,看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部