跟着 MDN 学JavaScript day_6：JavaScript 中的基础数学——数字与运算符

引言

编程的本质是对数据的处理与运算，而在所有数据类型中，数字无疑是最基础也最频繁被操作的对象。无论是计算购物车总价、控制游戏角色的移动距离、还是实现页面元素的动态缩放，都离不开数学运算。JavaScript 作为一门功能完备的编程语言，为我们提供了一套强大而灵活的数学工具集。本文将从最基础的数字类型讲起，逐步深入到算术运算符、运算符优先级、自增自减运算、赋值运算符以及比较运算符，最后还会简要介绍 Math 对象的几个实用方法。对于那些在学校里对数学感到头疼的读者来说，这一章或许会让你感到欣慰，因为 JavaScript 中的数学运算清晰且简洁，只要掌握了语法规则，复杂的计算都可以交给代码去完成。让我们正式开始这段数字之旅。

一、数字类型：整数与浮点数的世界

在编程的世界里，即使是再普通不过的十进制数字，也比你想象的要复杂一些。我们需要用不同的术语来描述不同类型的数值。整数是指没有小数部分的数，它们可以是正数或负数，例如 10、400 或者 -5。浮点数则是指带有小数点和小数位的数，例如 12.5 或 56.7786543。除了我们日常使用的十进制数之外，计算机领域还存在着其他计数系统：二进制是计算机最底层的语言，只有 0 和 1 两个数字；八进制以 8 为基数，每位使用数字 0 到 7；十六进制以 16 为基数，每位使用数字 0 到 9 以及字母 a 到 f，这种计数方式在 CSS 的颜色设置中经常出现。

对于初学者来说，好消息有两个。第一，在本课程中我们基本上只需要和十进制数打交道，你很少会遇到必须使用其他进制的情况。第二，与其他一些编程语言不同，JavaScript 只用一种数据类型来表示所有数字，无论是整数还是浮点数，统一被称为 Number 类型。这意味着你不必区分整数类型和浮点数类型，处理方式完全一致。我们可以通过简单的代码来验证这一点：

constmyInt=5;constmyFloat=6.667;myInt;myFloat;

在浏览器的开发者工具控制台中输入以上代码，你会发现两个变量都被成功创建并存储了数值。接下来，我们可以使用 typeof 运算符来检查它们的数据类型：

typeofmyInt;typeofmyFloat;

你会发现在两种情况下控制台都返回了 “number”。这证实了 JavaScript 对数字类型的统一处理方式。如果不同的数字具有不同的数据类型，我们就需要以不同的方式处理它们，而现在这种设计大大简化了开发者的工作。

Number 对象作为 JavaScript 中所有标准数字的底层表示，提供了一系列实用的方法。例如，要将一个浮点数四舍五入到指定的小数位数，可以使用 toFixed() 方法。这个方法接受一个参数，表示要保留的小数位数，并返回一个字符串形式的结果：

constlotsOfDecimal=1.7665849587;lotsOfDecimal;consttwoDecimalPlaces=lotsOfDecimal.toFixed(2);twoDecimalPlaces;

这段代码执行后，twoDecimalPlaces 的值将是字符串 “1.77”。需要注意的是，toFixed() 返回的是字符串类型而非数字类型，如果后续需要进行数学运算，你可能还需要将它转回数字。

二、字符串转数字：Number() 构造函数的使用

在实际开发中，你经常会遇到一个棘手的问题：数字被存储为字符串类型。这种情况最常发生在表单输入框中，因为用户在输入框中填写的内容默认都是文本类型。当你试图对一个字符串类型的数字进行数学运算时，结果往往会出乎意料。举例来说，假设我们有一个字符串变量 myNumber，并试图给它加上数字 3：

letmyNumber="74";myNumber+=3;

执行这段代码后，你得到的结果会是 “743” 而不是 77。这是因为 myNumber 本质上是一个字符串，加号运算符在这种情况下执行的是字符串拼接，而非数学加法。你可以用 typeof 运算符来验证这一点：

typeofmyNumber;

控制台会返回 “string”，证实了我们的判断。为了解决这个问题，JavaScript 提供了 Number() 构造函数，它可以将字符串值转换为对应的数字版本。正确的做法是先将字符串转换为数字，然后再进行加法运算：

letmyNumber="74";myNumber=Number(myNumber)+3;

这样修改后，结果就变成了我们期望的 77。这个知识点在实际开发中非常重要，因为表单数据处理几乎是每个 Web 应用的基础操作。当你的计算结果出现奇怪的错误时，首先检查参与运算的变量是否真的是数字类型，这能帮你节省大量的调试时间。

三、算术运算符：加減乘除与更多

算术运算符是进行数学计算的基本工具。JavaScript 提供了我们熟悉的加、减、乘、除四种基本运算符，同时还增加了求余和幂运算两个实用功能。加法和减法的用法最为直观，将两个数字相加或相减即可得到结果：

10+7;9*8;60%3;

你还可以将数字存储在变量中，然后使用这些变量来进行运算。变量的行为与直接用其持有的数值进行计算完全一致：

letnum1=10;letnum2=50;9*num1;num1**3;num2/num1;

在以上运算符中，求余运算符百分号值得特别说明。它返回的是除法运算之后的余数部分。例如 8 除以 3，可以整除 2 次，还剩余 2，所以 8 % 3 的结果就是 2。这个运算符在判断奇偶数、实现循环逻辑等场景中非常实用。

幂运算符由两个星号组成，它用来计算一个数的指定次方。例如 5 的 2 次方就是 5 乘以 5 等于 25，在代码中写作 5 ** 2。需要注意的是，在旧版本的 JavaScript 中，你可能还会看到使用 Math.pow() 方法来实现同样的功能，例如 Math.pow(7, 3) 相当于 7 ** 3，两者结果都是 343。现代开发中推荐使用更简洁的幂运算符写法。

四、运算符优先级：数学规则依然适用

当你开始编写包含多个运算符的复杂表达式时，运算符优先级就成为了一个不可忽视的概念。考虑下面这个例子：

5+10*3;

如果你从左到右按顺序计算，可能会认为结果是 45。但实际上，由于乘法运算符的优先级高于加法，10 乘以 3 会先被计算，得到 30，然后再加上 5，最终结果是 35。这个规则和我们小学学过的“先乘除、后加减”完全一致。

再来看一个更复杂的例子。假设 num2 的值是 50，num1 的值是 10：

num2+num1/8+2;

按照一般人的直觉，可能会这样理解：50 加 10 等于 60，8 加 2 等于 10，60 除以 10 等于 6。但浏览器实际的计算过程是：10 除以 8 等于 1.25，然后 50 加 1.25 加 2 等于 53.25。这个差异正是因为除法运算优先于加法运算。

如果你想要改变默认的计算优先级，可以使用圆括号将需要优先计算的部分包裹起来。括号内的表达式会最先被求值，这和数学中的用法完全一样。要得到 6 这个结果，可以这样写：

(num2+num1)/(8+2);

掌握运算符优先级是写出正确计算逻辑的基础。当你得到意料之外的计算结果时，优先检查是否因为优先级问题导致了计算顺序出错。

五、自增与自减运算符：简洁的加一减一

在编程中，有一种操作非常常见：将一个变量的值增加 1 或减少 1。例如在游戏循环中更新计数器、在遍历数组时移动索引位置等。为了简化这种操作，JavaScript 提供了自增运算符 ++ 和自减运算符 --。这两个运算符可以直接应用于变量，使变量的值自动加 1 或减 1。

letnum1=4;num1++;

值得注意的是，当你直接在控制台中执行 num1++ 时，浏览器会先返回变量的当前值 4，然后再将变量加 1。如果你紧接着再次查看 num1 的值，就会发现它已经变成了 5：

num1;

自减运算符的使用方式完全类似：

letnum2=6;num2--;num2;

这里还有一个细节值得注意：自增和自减运算符的位置会影响返回值的行为。如果运算符放在变量后面，浏览器会先返回变量的原值，然后再执行自增或自减。如果运算符放在变量前面，浏览器则会先执行自增或自减，然后返回更新后的值。你可以通过对比 num1++ 和 ++num1 的行为来验证这个差异。另外需要特别强调的一点是，自增和自减运算符只能用于变量，不能直接用于数字字面量。写出 3++ 这样的代码会直接报错，因为数字 3 是一个固定值，不能被修改。

六、赋值运算符：高效更新变量值

赋值运算符用于向变量分配值。最基本的赋值运算符是等号，它将右侧的值赋给左侧的变量。我们已经无数次使用过它：

letx=3;lety=4;x=y;

除了基本的等号之外，JavaScript 还提供了一系列复合赋值运算符，它们将算术运算和赋值操作合并在一起，使代码更加简洁高效。最常见的有加法赋值、减法赋值、乘法赋值和除法赋值。以加法赋值为例，x += 4 完全等价于 x = x + 4，意思是将变量 x 的当前值加上 4，然后把结果存回 x 中。

x+=4;

其他几种复合赋值运算符的工作原理完全类似：

x-=3;x*=3;x/=5;

这些运算符的右侧不仅可以是具体的数字，也可以是其他变量。例如，如果你想让变量 x 的值乘以变量 y 的值，可以直接写 x *= y，这比写 x = x * y 要简洁不少。善用这些复合赋值运算符，可以让你的代码更加紧凑易读，同时减少重复书写变量名的次数。

七、调整画布盒子大小：一个实践练习

为了巩固我们对算术运算符和赋值运算符的理解，这里有一个使用 Canvas API 绘制盒子的实践练习。盒子的宽和高分别由变量 x 和 y 控制，初始值都是 50 像素。我们需要通过修改计算 x 和 y 的代码行，使用特定的运算符和数值来达到指定的尺寸要求。具体任务如下：

第一，修改计算 x 的代码行，让盒子宽度保持 50 像素，但这个 50 必须通过数字 43 和 7 以及一个算术运算符计算得出。第二，修改计算 y 的代码行，让盒子高度变成 75 像素，这个 75 必须通过数字 25 和 3 以及一个算术运算符计算得出。第三，修改计算 x 的代码行，让盒子宽度变成 100 像素，这个 100 必须通过三个数字以及减法和除法运算符计算得出。第四，修改计算 y 的代码行，让盒子高度变成 200 像素，这个 200 必须通过数字 2 和变量 x 以及乘法运算符计算得出。

constcanvas=document.getElementById("canvas");constpara=document.querySelector("p");constctx=canvas.getContext("2d");// 仅编辑以下两行letx=50;lety=50;ctx.clearRect(0,0,canvas.width,canvas.height);ctx.fillStyle="green";ctx.fillRect(10,10,x,y);para.textContent=`长方形的宽为${x}px，长为${y}px。`;

这个练习的意义在于让你在具体场景中思考如何组合使用运算符来达到目标数值。它不需要你理解 Canvas API 的细节，只需要专注于数学计算部分。如果不小心把代码改乱了，可以随时点击重置按钮重新开始。

八、比较运算符：真与假的判断

有时候我们需要的不是计算出一个数值，而是判断两个值之间的关系，这种判断的结果只能是真或假，也就是布尔值。为此，JavaScript 提供了比较运算符。最常用的比较运算符包括严格等于、严格不等于、小于、大于、小于等于和大于等于。

严格等于运算符由三个连续的等号组成，它同时比较值和数据类型是否相同。严格不等于由感叹号和两个等号组成，用于判断两个值是否不相等。小于和大于的用法与数学中的不等号完全一致。小于等于和大于等于则在小于和大于的基础上增加了等于的情况。

5===2+4;5!==2+3;10<6;10>20;3<=2;5>=4;

需要特别提醒的是，JavaScript 中还存在 == 和 != 这两个运算符，它们也能用来判断相等和不相等。但这两个运算符只比较值是否相同，而不检查数据类型。这种宽松的比较方式可能会导致一些反直觉的结果，从而引发难以排查的逻辑错误。因此，在现代 JavaScript 开发中，几乎所有人都建议使用严格版本的 === 和 !== 运算符。

比较运算符在实际开发中的应用场景极其广泛。例如，你可以根据按钮当前的文字内容来决定点击后的行为。下面的示例展示了一个切换功能：点击按钮时，如果当前文字是“启动机器”，就改为“停止机器”并更新状态提示；如果当前文字是“停止机器”，则恢复为“启动机器”：

<button>启动机器</button><p>机器已停止运行。</p>javascript const btn = document.querySelector("button"); const txt = document.querySelector("p"); btn.addEventListener("click", updateBtn); function updateBtn() { if (btn.textContent === "启动机器") { btn.textContent = "停止机器"; txt.textContent = "机器已启动！"; } else { btn.textContent = "启动机器"; txt.textContent = "机器已停止运行。"; } }

在这个函数中，严格等于运算符被用来比较按钮的文字内容是否等于特定字符串。这种判断逻辑是条件语句的核心，我们将在后续的文章中深入学习如何编写更复杂的条件判断。

九、Math 对象：内置的数学工具

除了基本的算术运算符之外，JavaScript 还提供了 Math 对象，它包含了一系列用于复杂数学计算的方法和常量。虽然本文不会深入介绍所有方法，但有几个基础方法值得现在就了解。Math.random() 用于生成一个 0 到 1 之间的随机浮点数，每次调用的返回值都不同，这个方法在游戏开发、随机抽奖等场景中非常常用。Math.floor() 用于将一个数字向下取整到最近的整数，例如将 5.9 变成 5。Math.ceil()则相反，它用于向上取整，将 5.1 变成 6。结合这些方法，你可以实现各种实用的功能，比如生成指定范围内的随机整数。在接下来的学习中，你将频繁地遇到这些 Math 方法，因此现在对它们有一个初步的印象会很有帮助。

总结

在本文中，我们系统地学习了 JavaScript 中数字与数学运算的基础知识。我们从数字的类型划分讲起，理解了整数与浮点数的区别，也知道了 JavaScript 统一使用 Number 类型来表示所有数字。接着，我们学习了如何用Number()构造函数将字符串类型的数字转换为真正的数字，这是避免表单数据处理出错的必备技能。在算术运算符部分，我们掌握了加减乘除、求余和幂运算的用法。运算符优先级的概念提醒我们，代码中的计算顺序遵循数学中的先乘除后加减原则，必要时可以使用括号来改变优先级。自增自减运算符和复合赋值运算符则为变量值的更新提供了简洁的语法。比较运算符让我们能够在代码中进行真伪判断，为后续的条件逻辑打下基础。最后，Math 对象的几个基础方法为我们打开了更复杂的数学运算的大门。数字运算是 JavaScript 编程中最基础也最常用的技能之一，熟练掌握这些知识将对你的后续学习大有裨益。在下一篇文章中，我们将转向文本处理的世界，探索 JavaScript 如何操作字符串数据。