JavaScript 中的各种取整方式详解

在 JavaScript 中，数字取整是一项常见的操作，根据不同的业务需求，我们可以选择不同的取整方法。本文将全面讲解 JavaScript 中各种取整方式的特点、使用方法以及实际应用场景。

1. parseInt() - 丢弃小数部分

parseInt() 是最基本的取整方法，它会丢弃小数部分，只保留整数部分。

console.log(parseInt(85.5)); // 85
console.log(parseInt(5.999)); // 5
console.log(parseInt(-3.7)); // -3

特点：

• 适用于字符串和数字
• 会忽略小数点后的所有内容
• 适用于简单的取整需求

在 TypeScript 中注意事项： parseInt() 接受的参数类型是一个字符串，所以在 TS 中使用时需要特别注意类型。

2. Math.floor() - 向下取整

Math.floor() 方法返回小于或等于给定数字的最大整数。

console.log(Math.floor(7/3)); // 2
console.log(Math.floor(10.26)); // 10
console.log(Math.floor(95.99)); // 95
console.log(Math.floor(-4.2)); // -5

应用场景：

• 计算折扣后价格
• 分页计算总页数
• 确保不超过最大限制

3. Math.ceil() - 向上取整

Math.ceil() 方法返回大于或等于给定数字的最小整数。

console.log(Math.ceil(7/3)); // 3
console.log(Math.ceil(85.6)); // 86
console.log(Math.ceil(72.1)); // 73
console.log(Math.ceil(-4.2)); // -4

应用场景：

• 计算所需资源的最小数量
• 确保满足最低要求
• 分配空间时的计算

4. Math.round() - 四舍五入

Math.round() 方法返回一个数字四舍五入后最接近的整数。

console.log(Math.round(20/3)); // 7
console.log(Math.round(13/3)); // 4
console.log(Math.round(5.6)); // 6
console.log(Math.round(9.2)); // 9
console.log(Math.round(-3.5)); // -3 (注意：负数中 .5 会取较接近0的数)

特殊行为： 对于 .5 的情况，会向着较大的值方向取整：

console.log(Math.round(1.5)); // 2
console.log(Math.round(-1.5)); // -1

5. Math.trunc() - 直接截断小数部分

Math.trunc() 方法会去掉一个数字的小数部分，返回其整数部分，但不进行四舍五入。

console.log(Math.trunc(4.9)); // 4
console.log(Math.trunc(-4.1)); // -4
console.log(Math.trunc(42.84)); // 42

优势：

• 语义明确
• 代码易读
• 性能较好

6. 按位运算符取整

JavaScript 中的按位运算符也可以用于取整操作。

6.1 按位或 |

let num = 4.9;
let truncated = num | 0; // 4
console.log(truncated);

6.2 双波浪号 ~~

let num = 4.9;
let truncated = ~~num; // 4
console.log(truncated);

6.3 左移 << 0 和右移 >> 0

console.log(4.9 << 0); // 4
console.log(-4.9 >> 0); // -4

注意事项：

• 仅适用于32位整数范围（-2^31 ~ 2^31-1）
• 超出范围会导致精度丢失
• 可读性较差

7. 性能比较

不同取整方法的性能有所差异，以下是从快到慢的大致排序：

1. 按位运算符（|0, ~~, <<0 等）
2. Math.trunc()
3. Math.floor()/Math.ceil()
4. Math.round()
5. parseInt()

但注意： 在实际开发中，可读性和准确性通常比微小的性能差异更重要。

8. 应用场景总结

方法	特点	适用场景
parseInt()	丢弃小数	字符串转整数
Math.floor()	向下取整	确保不超过限制，计算最小需求
Math.ceil()	向上取整	确保满足最低要求
Math.round()	四舍五入	近似计算，显示友好的数值
Math.trunc()	截断小数	需要准确截断小数的场景
按位运算符	快速截断(32位整数内)	性能敏感的简单取整

SVG 图示

实际开发中的建议

1. 优先考虑可读性 ：Math.trunc() 和 Math.round() 等方法语义明确，更易于维护。

2. 考虑精度需求：涉及到金融计算等对精度要求高的场景时，应避免使用按位运算符。

3. TS 项目中注意类型 ：在 TypeScript 中，parseInt() 对类型要求更严格，需要注意。

4. 性能敏感场景：在高频执行的代码中对性能要求极高时，可以使用按位运算符，但应添加充分注释说明其作用。

5. 浏览器兼容性 ：所有现代浏览器都支持上述方法，但部分老旧浏览器可能不支持 Math.trunc() 方法。

希望这篇详尽的 JavaScript 取整方法指南能帮助您在实际开发中选择最适合的取整方式！