简述 JS 中的小数化整

JS 的数字都是双浮点类型，在我们平时使用中经常会有数字化整或保留几位小数的需求。前些日子拼多多就以显示空间有限，在 99.99 后还有未显示的 6 位小数为由打赢了官司

本文总结了几种常用的处理位数的方法，并给出了我在项目中常用的工具函数。

小数化整

Math

说到小数化整，立刻想到的就是 Math 对象提供的三个方法吧，

• Math.ceil：返回大于或等于给定数字的最小整数
• Math.floor：返回小于或等于给定数字的最小整数
• Math.round：返回数字四舍五入后最接近的整数

Math.ceil(1.5) // 2
Math.floor(1.5) // 1
Math.round(1.5) // 2

Math.ceil(-1.5) // -1
Math.floor(-1.5) // -2
Math.round(-1.5) // -1

Math 的方法简单实用，问题在于要写的字符较多

位运算

数字在进行位运算时，会自动把小数部分省略掉

常见的位运算有：位与 |、位或 &、左移 >>、右移 <<

仅用于小数化整不改变原数字的话，可以采用以下写法

1.5 | 0  // 1
1.5 >> 0  // 1
1.5 << 0  // 1

-1.5 | 0  // -1

使用位运算来化整数代码量小，代替正数的 Math.floor，与 Math.trunc 效果完全一致

需要注意的是，位运算的优先级是低于四则运算的

1.5 | 0 + 1 // 1
(1.5 | 0) + 1 // 2

保留固定位数

toFixed

toFixed 是数字的一个方法，用于返回一个固定小数位数的字符串，默认保留 0 位

toFixed 采取的也是四舍五入的规则，但是仅一个 5 的时候一样会被舍去

1.555.toFixed() // '2'
1.555.toFixed(1) // '1.6'
1.555.toFixed(2) // '1.55'
1.555.toFixed(4) // '1.5550'

一般在网页显示金额、时间时会用到这个函数

全能函数

但需要注意的是，有些场合并不可以四舍五入的，99.996 是不能化成 100.00 的，所以接下来实现自己的全能函数

代码如下：

/**
 * @description: 将数字按指定的规则处理
 * @param {number} num 要处理的数字
 * @param {number} bits 要保留的位数，默认化为整数，允许传入负数
 * @param {number} sign 要执行的取整方式，0向下取整，1向上取整，2四舍五入，3直接截取
 * @param {number} type 返回的数据类型，0数字，1字符串
 * @return {number|string}
 */
const fix = (num, bits = 0, sign = 2, type = 0) => {
  const pow = 10 ** bits
  num *= pow
  const fun = ['floor', 'ceil', 'round', 'trunc'][sign]
  num = Math[fun](num)
  num /= pow
  return type == 0 ? num : num.toFixed(bits)
}

fix(99.996) // 100
fix(99.996, -1, 0) // 90
fix(99.996, 2, 0, 1) // '99.99'
fix(99.996, 2, 1, 1) // '100.00'

结语

如果文中有不理解或不严谨的地方，欢迎评论提问。

如果喜欢或有所帮助，希望能点赞关注，鼓励一下作者。