首页 > 其他分享> 文章详细

js使用toFixed遇到的问题以及由此引发的小数精度问题

2022-01-04 15:36:27 阅读：181 来源： 互联网

标签：浏览器二进制 0.2 js 0.1 toFixed 小数

原文链接： https://www.cnblogs.com/yalong/p/15762637.html

项目中使用 toFixed 出现的问题:

一. js报错 `Uncaught SyntaxError: Invalid or unexpected token`

如下图所示：

就是说对整数和字符串使用toFixed() 会报错

二. 四舍五入不正确

1.335.toFixed(2) // 输出 1.33

四舍五入的问题在谷歌、火狐浏览器下都存在，ie浏览器下正常

三. 偶尔数字出现特别长的情况，如下图所示：

问题分析

问题一其实是toFixed的使用问题

x.toFixed(n) 方法可把 Number类型的数字x 四舍五入为指定小数位数的数字, n为保留的小数位数,并且返回的结果是字符串类型

注意这里x 必须为数字Number类型，如果用字符串的话报错

3.toFixed(2) 也会报错，原因是js引擎在运行的时候，默认将3后面的那个点认为是小数点，所以3.toFixed()也就相当于3.0toFixed()，所以报错

解决方法如下：

多加一个点: 3..toFixed(2) // 输出 3.00
把数字存一个变量上

let num = 3
num.toFixed(2) // 输出 3.00

用括号: (3).toFixed(2) // 输出 3.00

问题二是浏览器本身toFixed() 的计算有问题

解决办法可以重写浏览器的toFixed()函数，写法网上很多就不多介绍了

问题三的本质是js小数的精度问题

看下面的示例：

// 加法 =====================
0.1 + 0.2 = 0.30000000000000004
0.7 + 0.1 = 0.7999999999999999
0.2 + 0.4 = 0.6000000000000001

// 减法 =====================
1.5 - 1.2 = 0.30000000000000004
0.3 - 0.2 = 0.09999999999999998
 
// 乘法 =====================
19.9 * 100 = 1989.9999999999998
0.8 * 3 = 2.4000000000000004

// 除法 =====================
0.3 / 0.1 = 2.9999999999999996
0.69 / 10 = 0.06899999999999999

这个问题的原因简单来说就是计算机计算的时候，会先把10进制的小数转为2进制的机器编码，然后使用二进制的编码进行计算，最后再把二进制的结果转为10进制。

10进制小数转2进制小数的过程如下：

十进制的小数转换为二进制小数，主要是利用小数部分乘2，取整数部分，直至小数点后为0

以0.625为例, 如下图所示：

十进制的 0.625 转为二进制就是 0.101

但是有些小数转为二进制的时候，最后一位永远不会是0，然后就变成"无限长度"的了
看下面例子：

0.1 + 0.2 = 0.30000000000000004

把0.1 和 0.2 转成二进制如下：

0.1 -> 0.0001100110011001...(无限)
0.2 -> 0.0011001100110011...(无限)

IEEE 754 标准的 64 位双精度浮点数的小数部分最多支持 53 位二进制位，所以两者相加之后得到二进制为：

0.0100110011001100110011001100110011001100110011001100

因浮点数小数位的限制而截断的二进制数字，再转换为十进制，就成了 0.30000000000000004。
误差就是这么出现了

总结

浏览器的toFixed() 存在的问题如下：

四舍五入不准确，并且在不同浏览器下也存在差异
有时会出现小数的精度特别长的情况，当然这个的本质其实是小数的精度问题

对于以上的问题，可以把toFixed() 方法重写了，也可以使用别人的轮子，比如： bignumber

参考链接：
https://www.cnblogs.com/chyshy/p/14745284.html

https://www.cnblogs.com/bettermu/p/8532460.html

https://juejin.cn/post/6844903572979597319

https://jingyan.baidu.com/article/eb9f7b6dc692e9c79264e878.html

标签：浏览器,二进制,0.2,js,0.1,toFixed,小数
来源： https://www.cnblogs.com/yalong/p/15762637.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9