JS实现四舍五入

场景

前端计算金额时,经常会出现浮点型过长的问题,所以需要一个四舍五入的方法来保证小数的位数。

function main () {
    console.log(0.06 * 40.08)
}
main()

得出结果:

1. 使用toFixed

function main () {
    let res = (1.12 * 40.08)
    console.log('toFixed前: ' + res + ', 类型: ' + typeof res)
    res = res.toFixed(2)
    console.log('toFixed后: ' + res + ', 类型: ' + typeof res)
}
main()

使用toFixed可以实现四舍五入,不过这个返回的是一个string类型,并且当值是10.1时,返回的是10.10, 如下

function main () {
    let res = (10 * 1.01)
    console.log('toFixed前: ' + res + ', 类型: ' + typeof res)
    res = res.toFixed(2)
    console.log('toFixed后: ' + res + ', 类型: ' + typeof res)
}
main()

不过最终可以通过Number((10.1).toFixed(2))来进行处理,就是将得到的字符串转换成一个数字类型,并且后面多余的0也会消失,即"10.10" 变成了 10.1

function main () {
    let res = (10 * 1.01)
    console.log('toFixed前: ' + res + ', 类型: ' + typeof res)
    res = res.toFixed(2)
    console.log('toFixed后: ' + res + ', 类型: ' + typeof res)
    res = Number(res)
    console.log('Number后: ' + res + ', 类型: ' + typeof res)
}
main()

2. 使用Math.round(x)

这个方法的解释: 把数四舍五入为最接近的整数。

function main () {
    let res = (10 * 1.07)
    console.log('round前: ' + res + ', 类型: ' + typeof res)
    res = Math.round(res)
    console.log('round后: ' + res + ', 类型: ' + typeof res)
}
main()

这里读者可能会有疑问,这里并没有小数,而是直接变成了一个整数,所以我们需要优化一下,

先将小数 乘以 100 , 然后 round 一下 , 最后再 除以 100 , 就会拿到我们想要的结果,

100的意思即是保留两位小数。

function main () {
    let res = (10 * 1.07)
    console.log('round前: ' + res + ', 类型: ' + typeof res)
    res = Math.round(res * 100) / 100
    console.log('round后: ' + res + ', 类型: ' + typeof res)
}
main()

这里我们可以看到,输出的已经是一个标准的10.7小数.

再测试一下两位小数.

function main () {
    let res = (10 * 1.07777)
    console.log('round前: ' + res + ', 类型: ' + typeof res)
    res = Math.round(res * 100) / 100
    console.log('round后: ' + res + ', 类型: ' + typeof res)
}
main()

四舍五入后结果是 10.78 , 得到预期的结果。

优化

上面使用 Math.round方法实现了我们想要的结果,但是乘以 100 , 除以 100, 毕竟是写死的,

如果我们只想保留固定1位小数、或者3位、4位，那我们要不停的改动这个因子,把100改为 10、 1000这种,

所以我们可以封装一个小函数出来,需要几位传一个数字就行.

function main () {
    let res = (10 * 1.07777)
    console.log('保留1位: ' + toFixed(res, 1))
    console.log('保留2位: ' + toFixed(res, 2))
    console.log('保留3位: ' + toFixed(res, 3))
    console.log('保留4位: ' + toFixed(res, 4))
}

function toFixed(number,length) {
    return Math.round(Math.pow(10, length) * number) / Math.pow(10, length)
}

main()

可以看到,我们封装了一个toFixed函数,只需要传递一个具体的值和需要保留的长度,就可以获取到我们预期的结果.

先解释一下 Math.pow(x,y) 的含义: 返回 x 的 y 次幂。

function main () {
    console.log("一次幂: " + Math.pow(10, 1))
    console.log("二次幂: " + Math.pow(10, 2))
    console.log("三次幂: " + Math.pow(10, 3))
    console.log("四次幂: " + Math.pow(10, 4))
}
main()

其实这里我们用到的 Math.round(Math.pow(10, length) * number) / Math.pow(10, length) ,

等于我们上面所写的: Math.round(100 * number) / 100, 只是我们使用pow方法, 让100这个原本的因子可以根据我们的参数动态变化, 可以是 10、也可以是1000、或者 10000.

拓展

如果我们不想四舍五入呢? 直接丢弃小数

简单,将上面用到的Math.round改为Math.floor即可,

Math.floor(x): 将数字向下进行舍入.

function main () {
    let res = (10 * 1.07777)
    console.log('保留1位: ' + toFixed(res, 1))
    console.log('保留2位: ' + toFixed(res, 2))
    console.log('保留3位: ' + toFixed(res, 3))
    console.log('保留4位: ' + toFixed(res, 4))
}

function toFixed(number,length) {
    return Math.floor(Math.pow(10, length) * number) / Math.pow(10, length)
}

main()

读者可以查阅Math类提供的各种方法,进行自己的封装拓展.