Chrome/Firefox 中头toFixed方法四舍五入兼容性问题

每个Number的toFixed()方法可把 Number 四舍五入为指定小数位数的数字。四舍五入顾名思义,4及以下舍去,5及以上加1。

 

四舍

1
2
3
4
1.31.toFixed(1) // 1.3
1.32.toFixed(1) // 1.3
1.33.toFixed(1) // 1.3
1.34.toFixed(1) // 1.3

 

五入

1
2
3
4
5
1.35.toFixed(1) // 1.4
1.36.toFixed(1) // 1.4
1.37.toFixed(1) // 1.4
1.38.toFixed(1) // 1.4
1.39.toFixed(1) // 1.4

 

IE6-10

1
2
3
4
5
6
1.35.toFixed(1) // 1.4 正确
1.335.toFixed(2) // 1.34  正确
1.3335.toFixed(3) // 1.334 正确
1.33335.toFixed(4) // 1.3334 正确
1.333335.toFixed(5)  // 1.33334 正确
1.3333335.toFixed(6) // 1.333334 正确

 

但在 chrome44/firefox41 里对于最后一位是 5 的有时竟然没有进位

1
2
3
4
5
6
1.35.toFixed(1) // 1.4 正确
1.335.toFixed(2) // 1.33  错误
1.3335.toFixed(3) // 1.333 错误
1.33335.toFixed(4) // 1.3334 正确
1.333335.toFixed(5)  // 1.33333 错误
1.3333335.toFixed(6) // 1.333333 错误

可以看到,小数点位数为2,5时四舍五入是正确的,其它是错误的。

 

如果最后一位为非 5 ,chrome44/firefox41 则没有这个问题

1
2
3
4
5
6
1.36.toFixed(1) // 1.4 正确
1.336.toFixed(2) // 1.34  正确
1.3336.toFixed(3) // 1.334 正确
1.33336.toFixed(4) // 1.3334 正确
1.333336.toFixed(5)  // 1.33334 正确
1.3333336.toFixed(6) // 1.333334 正确

 

修复方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*
 * 修复 firefox/chrome 中 toFixed 兼容性问题
 * firefox/chrome 中,对于小数最后一位为 5 时进位不正确,修复方式即判断最后一位为 5 的,改成 6, 再调用 toFixed
 */
function toFixed(number, precision) {
    var str = number + ''
    var len = str.length
    var last = str.substr(len-1, len)
    if (last == '5') {
        last = '6'
        str = str.substr(0, len-1) + last
        return (str - 0).toFixed(precision)       
    } else {
        return number.toFixed(precision)
    }
}

 

2015.10.26 补充:Firefox 和 Chrome的实现没有问题,根本原因是计算机里浮点数精度丢失问题。修复方式改为

1
2
3
4
5
6
7
// toFixed 修复
function toFixed(num, s) {
    var times = Math.pow(10, s)
    var des = num * times + 0.5
    des = parseInt(des, 10) / times
    return des + ''
}

  

相关:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

https://es5.github.io/#x15.7.4.5

posted on   snandy  阅读(7207)  评论(0编辑  收藏  举报

编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示