解决前端JS小数运算精度问题

前言

在做项目的时候，前端需要在表格的底部做一个汇总的功能，在采用reduce对当前属性所有值汇总时，发现汇总结果存在好长的小数位，本以为后端的数据就存在精度这么小的数据，后来，检查发现后端精度只有三位小数，但前端计算结果为什么会这样呢？

JS存在精度问题

在控制台可以试一下
0.1 + 0.2 的结果是0.30000000000000004
js的运算下 0.1 + 0.2 != 0.3

由于计算机在存储和计算数字的时候，使用的是二进制形式，有些十进制数据再转换成二进制时，无法精确表示。

JS在数字运算的时候，当存在浮点数的运算时，就有可能会出现精度误差，有些小数无法用二进制精确表示。

JavaScript采用的是双精度(64位)浮点运算规则，遵循的是IEEE二进制浮点数算法标准。其中有1位用作符号位，11位为阶码，尾数有52位。有兴趣详细了解的可以查阅相关资料。

比如
十进制0.1 -> 二进制表示为0.0001 1001 1001 1001...(1100循环)
十进制0.2 -> 二进制表示为0.0011 0011 0011 0011...(0011循环)
EEE 754 标准的 64 位双精度浮点数的小数部分最多支持53位二进制位，所以两者相加之后得到二进制为：
0.1 + 0.2 = 
0.0100110011001100110011001100110011001100110011001100 
因浮点数小数位的限制而截断的二进制数字，再转换为十进制，就成了0.30000000000000004。

解决方案

思路：

1. 将小数转化成整数进行计算，规避浮点数运算问题。
2. 整数的加减乘运算结果不会出现浮点数，不会存在精度问题，但除法会出现浮点数，因此用toFixed()方法截掉无效的小数位。
3. 将string转回number输出

/** 封装一个公共方法numberCalculate() 用于浮点数运算 */
//num1 num2传入两个值 symbol +-*/符号
numberCalculate(num1: number, num2: number, symbol: string) {
    var str1 = num1.toString(), str2 = num2.toString(), result, str1Length, str2Length
    try {
        //获取小数点后的精度
        str1Length = str1.split('.')[1].length 
    } 
    catch (error) { 
        //解决整数没有小数点方法
        str1Length = 0 
    }
    try { 
        str2Length = str2.split('.')[1].length 
    } catch (error) { 
        str2Length = 0 
    }
    // 取两个数的最小精度，即小数点后数字的最大长度
    var maxLen = Math.max(str1Length, str2Length)
    // step将两个数都转化为整数至少小数点后移多少位
    var step = Math.pow(10, maxLen)

    switch (symbol) {
        case "+":
        // toFixed()根据最小精度截取运算结果
        result = ((num1 * step + num2 * step) / step).toFixed(maxLen)
        break;
        case "-":
        result = ((num1 * step - num2 * step) / step).toFixed(maxLen)
        break;
        case "*":
        result = (((num1 * step) * (num2 * step)) / step / step).toFixed(maxLen)
        break;
        case "/":
        result = ((num1 * step) / (num2 * step)).toFixed(maxLen)
        break;
        default:
        break;
    }
    // 由于toFixed方法返回结果是字符串，还需要转回number输出
    return Number(result)
}

0.1 + 0.2的计算，就可以调用numberCalculate(0.1,0.2,'+')进行计算了。

问题

当前方案把浮点数移位成整数进行运算，在移位回去，使得可计算的范围将大大变小，比如： 假如系统最大运算的数字是整数部分32位，小数部分32位，在这种前提下做运算的位数将缩小一半，最大能支持的是小数和整数部分一起是32位的数字。 因此，如果项目中涉及到特别大位数或者特别小精度的数值运算的话，慎用这种方法，推荐接入Bignumber.js第三方库解决。在数值位数可控且只是简单用用，用不到那么多功能的情况下，这种方案够用了。

参考资料：