JS的浮点数计算精度丢失问题解决方案

前言:

近期在做项目的时候,遇到了一些JS浮点数精度的问题。这个问题,其实说大不大,说小不小。但是这次因为涉及到一些财务和结算的问题,然后突然发现这个小问题处理起来还是挺麻烦的。这里把相关的原因的问题的解决方案整理一下,也希望给各位提供一些参考。

案例分析:

近期的项目,由于在H5页面上需要进行动态的金额计算,且金额涉及到了小数,因而随之产生了JS浮点数计算的精度丢失问题。
刚开始的时候,测试给提了一个金额计算误差的问题,刚开始我还没怎么重视,然后瞅了瞅代码,随便改了改做了些异常处理,然后就给提交了。
接着,测试又提了一个bug,“6.8-0.9=5.8”。然后顿时我就蒙逼了,随后突然意识到,JS作为解释性语言,直接计算会有浮点数精度丢失问题。接下来,在网上找了一些资料,然后也根据具体的原理自己做了一些修改,最终解决了问题。下面就把整个问题解决的思路整理一下。

浮点数的二进制表示:

IEEE 754 标准是IEEE二进位浮点数算术标准(IEEE Standard for Floating-Point Arithmetic)的标准编号,等同于国际标准ISO/IEC/IEEE 60559。该标准由美国电气电子工程师学会(IEEE)计算机学会旗下的微处理器标准委员会(Microprocessor Standards Committee, MSC)发布。这个标准定义了表示浮点数的格式(包括负零-0)与反常值(denormal number),一些特殊数值(无穷(Inf)与非数值(NaN)),以及这些数值的「浮点数运算子」;它也指明了四种数值修约规则和五种例外状况(包括例外发生的时机与处理方式)。

0.02625=0.000001101(二进制),无法精确求出二进制表示,因此采用“四舍五入法”(逢1进,逢0舍)。

以上就是问题产生的原理,很多编译型语言如Java,c#等都对浮点数的处理进行了封装。因此平时大多数情况下,并不会出现明显的可见的问题。js本身作为解释性语言,好像这点上有着天生的劣势。随后本人在网上找了很多解决方式,也大多数是通过自定义的方法去解决这个问题,原理基本都大同小异。

解决方案:

本质上在处理这类问题的时候,基本的思路就是通过将浮点数转换成整数进行计算,然后再将整数的小数点位调整,转回正确的浮点数结果。

原生计算:

console.log(6.8-0.9);
console.log(6.8-0.8);
console.log(6.8-0.4);
console.log(6.8-0.3);
//结果
5.8999999999999995
6
6.3999999999999995
6.5

第一步,定义一个自定义的转换和处理函数:

Math.formatFloat = function (f, digit) {
    var m = Math.pow(10, digit);
    return parseInt(f * m, 10) / m;
}

此时调用这个自定义的函数,来处理上面的原生计算:

console.log(Math.formatFloat(6.8-0.9,1));
console.log(Math.formatFloat(6.8-0.8,1));
console.log(Math.formatFloat(6.8-0.4,1));
console.log(Math.formatFloat(6.8-0.3,1));
//此时结果
5.8
6
6.3
6.5

仔细看输出的结果,会发现,6.8-0.9应该输出结果5.9,6.8-0.4应该输出6.4,这里转换结果还是不正确。可以将自定义方法内部的结果进行打印,进行对比。

console.log(6.8-0.9);
console.log((6.8-0.9)*10);//
console.log(parseInt((6.8-0.9)*10,10));
//在转换结果的时候出现了问题,转换为整数时,小数点后直接被截断了
console.log(((6.8-0.9)*10)/10);
//结果
5.8999999999999995
58.99999999999999
58
5.8999999999999995

这里自定义的函数,做一下具体的处理。在浮点数计算的时候,很多时候产生的都是这种极限数据,如果要精确进行整数转换,要放大的倍数过大。这里我们可以用四舍五入对转换的过程进行优化:

Math.ceil((6.8-0.9)*10);//向上取整
59
Math.floor((6.8-0.9)*10);//想下取整
58
Math.round((6.8-0.9)*10);//四舍五入
59

优化之后的自定义函数:

Math.formatFloat = function (f, digit) {
    var m = Math.pow(10, digit);
    return Math.round(f * m, 10) / m;
}

此时重新调用函数对计算结果进行打印:

console.log(Math.formatFloat(6.8-0.9,2));
console.log(Math.formatFloat(6.8-0.8,2));
console.log(Math.formatFloat(6.8-0.4,2));
console.log(Math.formatFloat(6.8-0.3,2));
//打印结果
5.9
6
6.4
6.5
|| 版权声明
作者:云言
链接:https://yyink.cn/archives/384.html
声明:如无特别声明本文即为原创文章仅代表个人观点,版权归《云言博客》所有,欢迎转载,转载请保留原文链接。
THE END
分享
二维码
海报
JS的浮点数计算精度丢失问题解决方案
前言: 近期在做项目的时候,遇到了一些JS浮点数精度的问题。这个问题,其实说大不大,说小不小。但是这次因为涉及到一些财务和结算的问题,然后突然发现这个……
<<上一篇
下一篇>>