JavaScript 怎么把小数取整？附 3 种最常用的方法讲清楚

把小数变成整数，最常用就是 JavaScript 取整：Math.floor 向下舍入、parseInt 直接截掉小数部分、位运算也能快速取整。三种写法各有脾气，用错一个符号结果就差很远。今天这篇文章，编程狮就把 JavaScript 取整的三种方法一次讲透，帮你选对、写对、不再被小数点坑。在分页计算、坐标处理、百分比进度这些场景里，取整几乎天天见；而 Math.floor 和 parseInt 在负数时行为完全不同，先搞清楚区别，才不会因为一个符号写错而 debug 到怀疑人生。

一、先搞懂：取整到底是“舍”还是“入”

很多人以为“取整”就是把小数去掉，但实际上“取整”这个词本身并不规定方向。同样是 3.7，向下取整得到 3，向上取整得到 4，四舍五入得到 4，直接截断小数也得到 3。所以动手之前，得先想清楚你到底要“往哪个方向靠”。

在 JavaScript 里，数字是同一套 Number 类型，不管是整数还是小数都这么存。所谓“取整”，本质都是把小数部分按某种规则处理掉，只留下整数部分。想系统补基础，JavaScript 教程里对 Number 类型和数学方法讲得很完整，建议搭配着看。JavaScript 取整的底层，其实都建立在对 Number 类型的理解上。

💡 小提示：取整和“四舍五入”不是一回事。四舍五入只是取整的一种策略，而 Math.floor、parseInt 这些压根不四舍五入，它们走的是各自的规则。

二、方法一：Math.floor 向下取整（最稳）

在 JavaScript 取整的三种写法里，Math.floor 是最稳的一种：它的作用是“向下取整”，也就是取小于等于这个数的最大整数。不管正负数，它永远朝更小的方向靠。

Math.floor(3.7);   // 3
Math.floor(3.2);   // 3
Math.floor(-3.2);  // -4（注意：朝更小的方向，所以是 -4 不是 -3）

上面这段里，Math.floor(3.7) 得到 3，因为 3 是小于等于 3.7 的最大整数；而 Math.floor(-3.2) 得到 -4，因为 -4 比 -3.2 更小。这是新手最容易踩的坑：负数时它“越取整越小”。

这种写法语义最清晰、行为最可预期，是绝大多数业务场景的首选。处理数组类数据时，JS 数组去重里也有用到类似的数学处理思路，可以对照着理解。

三、方法二：parseInt 直接截掉小数（最直白）

JavaScript 取整的第二种写法 parseInt，走的是“朝零截断”的路子：它本来是用来“把字符串解析成整数”的，但如果你直接传一个数字进去，它会先转成字符串，再从头读整数部分，遇到小数点就停。所以它的效果是“直接截断小数”，而且永远朝零的方向（正数向下、负数向上）。

parseInt(3.7);   // 3
parseInt(3.2);   // 3
parseInt(-3.2);  // -3（朝零，所以是 -3）

上面这段里，parseInt(-3.2) 得到 -3，和 Math.floor(-3.2) 的 -4 不一样——这就是它和 floor 最关键的区别：parseInt 朝零取整，floor 朝负无穷取整。

取整方法对比

不过要提醒一句：parseInt 本质是给字符串用的，拿它给数字取整属于“顺手借用”，读代码的人容易误会你的意图。如果只是想截断小数，Math.floor 配合 Math.abs 处理符号会更明白。

还有个隐蔽坑：parseInt 还能接收第二个参数指定进制，parseInt("10", 2) 会把 "10" 当成二进制算出 2。如果你从别处拷来一段代码、又恰好传了进制参数，结果会完全出乎意料。所以拿它做纯数字取整时，最好明确不传第二个参数，避免被进制悄悄改掉结果。对纯数字取整，优先 Math 系列方法。

四、方法三：位运算 ~~ 取整（最省事但要小心）

JavaScript 的位运算会把操作数先转成 32 位整数，利用这个特性，可以用两次按位取反（~~）来快速取整。它同样朝零取整，而且写法最短。JavaScript 取整的位运算写法，靠的就是这个 32 位转换特性。

~~3.7;   // 3
~~3.2;   // 3
~~-3.2;  // -3

上面这段里，~~3.7 得到 3，效果等价于 parseInt，但性能上略快一点点（不过现代引擎差异极小，别为了这点性能牺牲可读性）。它最大的限制是：只能处理 32 位有符号整数范围（大约正负 21 亿），超出这个范围结果就错了。

~~2147483648;  // 得不到正确结果，超出 32 位整数范围

所以位运算取整只适合“明确知道数值很小”的场景，比如把画布坐标、百分比进度这种小数字快速变整数。关于学习顺序，JS 学习路径里也提到了运算类基础该先打牢哪些，值得参考。

五、三种写法怎么选，以及两个坑

选型口诀很简单：要“向下取整”用 Math.floor；要“朝零截断”且语义清楚用 parseInt（或更推荐显式写 Math.trunc）；只是处理确定很小的小数字、图省事，才用 ~~ 位运算。最稳、最不会出意外的，永远是 Math.floor。聊完 JavaScript 取整的三种写法，你会发现“方向”才是选对方法的关键。

坑一：负数方向搞反。 Math.floor(-3.2) 是 -4 不是 -3，很多人在做“向下取整”时误以为是 -3，导致分页、坐标计算整体偏移。写之前先问自己：我要的是“更小”还是“更接近零”？

坑二：用 parseInt 当取整却忘了它的字符串本质。 parseInt("3.7abc") 也会返回 3，因为它读到小数点就停了——这在某些脏数据下会“ silently 成功”，埋下隐蔽 bug。对纯数字取整，优先 Math 系列方法。

⚠️ 注意：如果你要的是“四舍五入”，以上三种都不是，得用 Math.round。别张冠李戴，否则统计和金额类逻辑会算错。

总结

JavaScript 取整，核心是选对“方向”：Math.floor 朝负无穷、parseInt 和 ~~ 朝零、Math.round 才四舍五入。日常开发里，Math.floor 是最稳的默认选择；parseInt 适合明确的截断语义；~~ 只用于确定很小的数且追求极简。请记住最关键的一点——负数时 floor 和 parseInt 结果不同，动笔前先想清楚你要朝哪个方向，别被一个小数点带偏。

常见问题

Q：Math.floor 和 Math.round 有什么区别？
A：Math.floor 永远向下取整（3.7→3，-3.2→-4），Math.round 是四舍五入（3.7→4，-3.2→-3）。要“最接近的整数”用 round，要“不超过它的最大整数”用 floor。

Q：为什么 ~~ 取整有时候结果是错的？
A：因为位运算会把数字转成 32 位有符号整数，范围大约是正负 21 亿。超出这个范围（比如超大时间戳、超长 ID）就会溢出得到错误结果，所以大数千万别用位运算取整。

Q：parseInt(3.7) 和 Math.floor(3.7) 结果一样，能互换吗？
A：正数小数字时结果一致，但负数时不一样（parseInt 朝零、floor 朝负无穷），而且 parseInt 本质是解析字符串，语义不同。建议只用 Math 系列做纯数字取整，意图更清晰。

延伸学习

想把前端数学与运算基础打牢，可以按这个顺序来：

先过一遍 JavaScript 教程，把 Number、Math、位运算这些根基铺平；
具体语法和属性记不住时，JavaScript 速查手册能随时翻查；
想跟着视频边看边练，JavaScript 入门课是循序渐进的形式，适合巩固上手。