正在加载...

JavaScript 算术

你已经有了运算符家族地图。本课深入 算术家族——主要对 数字 运算并返回新值的符号。你会练习 + - * / %,用括号控制顺序,用 ++ 和 -- 移动计数器,用 幂运算符 求幂,并修好经典陷阱:当 + 拼接文本而不是相加时。

什么是算术运算符?

算术运算符告诉 JavaScript 去 计算。参与运算的值仍叫 操作数。在 12 / 4 中,/ 是运算符,12 和 4 是操作数。结果可以存起来、打印到控制台,或显示在页面上。

五个日常运算符

📊 日常算术运算符

运算符 作用 示例结果
+ 加 7 + 3 → 10
- 减 7 - 3 → 4
* 乘 7 * 3 → 21
/ 除 7 / 2 → 3.5
% 除后余数 7 % 3 → 1

把这张表放在手边。/ 可能得到小数。% 不是「百分号」——它是 余数。

五个算术运算符

javascript
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 个」的逻辑。

余数模式

javascript
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 并不总是严格从左到右计算。乘除通常 先于 加减。括号强制你想要的顺序——先读 (…) 里面。

优先级与括号

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 也完全正确;循环里会经常看到 ++。

自增、自减与幂

javascript
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(...) 转换。

用 Number 修正 +

javascript
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。这和类型转换是同一思路——表单和页面文字里经常遇到。

在页面上显示合计

算一笔小账单,用余数作提示,并把结果写到页面上。

页面合计与算术

html
<!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,刷新后确认两个数字。

自己试试

  1. 打印 14 + 5、14 - 5、14 * 5、14 / 5 和 14 % 5。
  2. 用 % 和 === 0 判断 22 是否为偶数。
  3. 对比 1 + 2 * 3 与 (1 + 2) * 3。
  4. 从 let c = 0 开始,执行两次 c++,再打印 c。
  5. 打印 3的3次方 和 Number("8") + 1。
  6. 在 HTML 演示里只改 qty,刷新后读新的合计与余数。

常见错误

  • 把 % 当成「百分号」——它是 余数
  • 以为 + 总会相加——字符串一侧常常 拼接
  • 忘记括号,却又不想让乘除抢先
  • 把 ++(改一)和 =(存任意值)搞混
  • 对展示用字符串做运算,而不是对原始数字

小结

  • 算术运算符:+ - * / %
  • % 是余数——适合奇偶与「每隔 N」
  • 括号控制优先级;通常 * / 先于 + -
  • ++ / -- 每次改一;幂运算符 求幂
  • 当 + 拼接时使用 Number()
  • 下一课:赋值——用 = 及同类符号存储与更新

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己,看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部