头图

开发中经常遇见要保留几位小数,大家都知道要使用toFixed(),但是使用toFixed()会发现和正常的四舍五入有区别。造成不同的原因就是浮点数精度缺失问题导致的。

可以通过toPrecision(17)查看具体精度。

我们来看个例子,这两个的结果是什么呢?
image.png

2.3505.toFixed(3),
按照四舍五入应该是2.351
使用toPrecision查看精度,2.3505.toPrecision(17),结果是'2.3504999999999998',在使用toFixed(3),可以看到小数点后第4位是4,小于5所以舍去,结果是2.350

2.3525.toFixed(3),
按照四舍五入应该是2.353
使用toPrecision查看精度,2.3525.toPrecision(17),结果是'2.3525000000000000',在使用toFixed(3),可以看到小数点后第4位是5,大于等于5所以进1,结果是2.353

我们发现和控制台打印的不一样,为什么呢?

来找个奇数的例子,同样先看控制台打印结果:

image.png

2.3515.toFixed(3),
按照四舍五入应该是2.352,
使用toPrecision查看精度,2.3515.toPrecision(17),结果是'2.3515000000000001',在使用toFixed(3),可以看到小数点后第4位是5,大于等于5所以进1,结果是2.352

2.3535.toFixed(3),
按照四舍五入应该是2.354,
使用toPrecision查看精度,2.3535.toPrecision(17),结果是'2.3534999999999999',在使用toFixed(3),可以看到小数点后第4位是4,小于5所以舍去,结果是2.353

和控制台打印的还是不一样。

是算法出问题了还是浏览器出问题了,不用慌,这个是由于浮点数精度问题导致的误差。

上边2.35250.toFixed(3)有问题,我们先看下2.35250到底是什么?

image.png

大家可以看到2.35250.toPrecision(17)是2.3525000000000000,所以在toPrecision()结果后在进行四舍五入,最好的结果是2.353

同样的原理,我们找个控制台打印正确的数字看看,

image.png

2.3537底层是2.3536999999999999034,第4位是6大于5,应该是进1。

回到第二个例子中的2.3535.toFixed(3),结果是2.353,一起验证下:

image.png

2.3535底层是2.3534999999999999254,第4位是4,小于5,所以舍去,结果是2.353。

好了,这期分享结束,如果有不同答案请留言,反正我也不改。


前端搬运工
742 声望66 粉丝

一杯茶,一根烟,一行代码写一天。