js精度问题

2019-06-25

JavaScript 为什么不能处理小数运算

先看看下面的程序：

var sum = 0;
for(var i = 0; i < 10; i++) {
  sum += 0.1;
}

console.log(sum);

console.log(0.1 + 0.2);

console.log(0.2 + 0.3);

上面的程序会输出1、0.3、0.5吗？

浏览器渲染过程图解

0.1 + 0.2 都不会等于 0.3，但是 0.2 + 0.3 却等于 0.5，这是为何？想必这类问题也困扰着不少程序员。但要先说明的是，不能正确处理小数的运算并不是 JavaScript 语言本身的设计错误，其它高级编程语言，如C，Java等，（采用 IEEE754 浮点数标准的语言中）也是不能正确处理小数运算的：

#include <stdio.h>

void main(){
    float sum;
    int i;

    sum = 0;

    for(i = 0;  i < 100; i++) {
        sum += 0.1;
    }

    printf('%f\n', sum);  //10.000002
}

IEEE754 浮点数的演算

我们知道，科学计数法中 30000 可以写成 3x104，以 10 为底数 4 为指数的科学计数法。在 IEEE754 标准中是比较类似的，只不过它是二进制数，底数也为 2。

IEEE 754 中最常用的浮点数值表示法是：单精确度（32位）和双精确度（64位），JavaScript 采用的是后者。举个例子，十进制数 150，使用双精度浮点数表示法，除2取余数倒排，表示如下：

1 2	// D 表示十进制，B 表示二进制 150D = 2^8 * 0.1001011B // 后面省略了 46 个 0

可以通过短除法计算：

   150   余数位
÷    2
---------------
    75     0
÷    2
---------------
    37     1
÷    2
---------------
    18     1
÷    2
---------------
     9     0
÷    2
---------------
     4     1
÷    2
---------------
     2     0
÷    2
---------------
     1     0
÷    2
---------------
     0     1

最后一个余数为高位值，于是拿到 150 对应的二进制数位 10010110，也就等于 2^8 * 0.1001011。

上面是整数的表示法，而小数的表示法采用的是乘2取整正排，如 0.1，它的二进制表示为：

1 2	// (0011) 表示循环 0.1D = 2^-3 * 0.110011(0011)

其演算方法如下：

    0.1   整数位
×     2
---------------
    0.2     0
×     2
---------------
    0.4     0   * ↓
×     2
---------------
    0.8     0
×     2
---------------
    1.6     1
×     2
---------------
    1.2     1
×     2
---------------
    0.4     0   * ↑
             (0011循环)

与整数不同的是，第一个计算得到的整数位为最高位，故 0.1 对应的二进制数为 0.000110011(0011)，也就等于 2^-3 0.1100110011(0011)。

进制转换一句话：

整数部分是除2取余数倒排/小数部分是乘2取整正排，直到小数部分为0/如果一个数既包含整数部分，又包含小数部分，其表示法的计算，需要分拆为整数和小数两部分，然后相加得到结果。

数在计算机内部的表示 & IEEE754 浮点数精度丢失

我们都知道，用高级编程语言编写的程序需要经过解释、编译等操作转变成 CPU(Central Processing Unit) 可以识别的机器语言才能运行，而对 CPU 来说，它不识别数的十进制、八进制和十六进制等，我们在程序中声明的这些进制数都会被转成二进制数进行运算。

IEEE754 浮点数表示法的数据格式如下图：

// 下图采用大端表示，高位在左，低位在右。

sign  exponent         fraction
+---+----------+---------------------+
| 1 |   2~12   |         13~64       |
+---+----------+---------------------+

符号位：高位第 1 位，如图 sign 部分
指数位：高位第 2~12 位，如图 exponent 部分
尾数位：剩下的 fraction 部分

从上面小数的乘二取整演算中可以看到，有些小数对应的二进制数是无法写全的，比如 0.1，而 fraction 尾数部分有要求，只允许 52 位，超过部分进一舍零。

那么，我们就可以得到：

0.1D 
= 2^-4 * 1.10011(0011)B
= 2^-4 * 1.10011(0011 repeat 12 times)0011B // ← 最后一位为 1，进 1
= 2^-4 * 1.10011(0011 repeat 12 times)010B

揭秘 0.1 + 0.2

根据上面我们了解到的知识，我们可以很容易算出这些值：

1
2
3

0.1D = 2^-4 * 1.1001100110011001100110011001100110011001100110011010B
0.2D = 2^-3 * 1.1001100110011001100110011001100110011001100110011010B
0.3D = 2^-2 * 1.0011001100110011001100110011001100110011001100110011B

0.1 + 0.2 时，先将两者指数统一为 -3，故 0.1 小数点向左移一位，于是：

   0.1100110011001100110011001100110011001100110011001101B
+  1.1001100110011001100110011001100110011001100110011010B
------------------------------------------------------------
= 10.0110011001100110011001100110011001100110011001100111B

得到的二进制数为：

1	10.0110011001100110011001100110011001100110011001100111B

小数点往左移一位使得整数部分为 1，此时尾数部分为 53 位，进一舍零，于是得到最后的值是：

1	2^-2 * 1.0011001100110011001100110011001100110011001100110100

这个值转化成真值，结果为：0.30000000000000004。那么 0.1 + 0.2 = 0.30000000000000004 的推演到这里就结束了。

现在看JavaScript不能处理小数运算的面纱是不是就揭开了！！！

解决方案

首先，理论上用有限的空间来存储无限的小数是不可能保证精确的，但我们可以处理一下得到我们期望的结果。

数据展示类

对于运算类操作，如 +-*/，正确的做法是把小数转成整数后再运算。以加法为例：

/**
 * 精确加法
 */
function add(num1, num2) {
  const num1Digits = (num1.toString().split('.')[1] || '').length;
  const num2Digits = (num2.toString().split('.')[1] || '').length;
  const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
  return (num1 * baseNum + num2 * baseNum) / baseNum;
}

//加法
Number.prototype.add = function (arg) {
    var r1, r2, m;
    try { r1 = this.toString().split(".")[1].length } catch (e) { r1 = 0 }
    try { r2 = arg.toString().split(".")[1].length } catch (e) { r2 = 0 }
    m = Math.pow(10, Math.max(r1, r2))
    return (this * m + arg * m) / m
}
//减法
Number.prototype.sub = function (arg) {
    return this.add(-arg);
}

//乘法
Number.prototype.mul = function (arg) {
    var m = 0, s1 = this.toString(), s2 = arg.toString();
    try { m += s1.split(".")[1].length } catch (e) { }
    try { m += s2.split(".")[1].length } catch (e) { }
    return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
}

//除法
Number.prototype.div = function (arg) {
    var t1 = 0, t2 = 0, r1, r2;
    try { t1 = this.toString().split(".")[1].length } catch (e) { }
    try { t2 = arg.toString().split(".")[1].length } catch (e) { }
    with (Math) {
        r1 = Number(this.toString().replace(".", ""))
        r2 = Number(arg.toString().replace(".", ""))
        return (r1 / r2) * pow(10, t2 - t1);
    }
}

参考：

https://github.com/camsong/blog/issues/9