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）），以及这些数值的「浮点数运算子」；它也指明了四种数值修约规则和五种例外状况（包括例外发生的时机与处理方式）。

JS的浮点数实现也是遵循IEEE 754标准，采用双精度存储（double precision），进行了相关的实现。其中1位用来表示符号位，11位用来表示指数，52位表示尾数。如下图：

由于无论是采用了哪种表达方式进行怎样的计算，到了计算机的最底层，都是通过1和0的机器码来对具体的数据和操作进行具体的实现。由于底层实现机制的原因，浮点数在转换为二进制表示的时候，无法精确表示这种包含小数点的数据，其本质是将浮点数转换成了用二进制表示的最接近的近似值。下面一个例子可以用来简单说明浮点数在转换为二进制时候的计算方法。如下图：

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

写在最后：

近些日子，发现js的火爆程度实在有点出乎意料。而且随着node等技术的出现，让js这样的原来以慢著称的语言有了和服务端开发语言的能力。之前微软，苹果，oracle等公司都尝试用自己的语言和生态体系，统治整个开发者的世界。然而，我觉得说不定js能完成，这些巨头没有完成的工作。也许开发语言的大一统，会在不远的未来实现。

---

希望我的文字能给你带来帮助:

码字不易,与君共勉!