js中浮点数运算精度问题

在js中，我们有时会遇到计算，通过加减乘除处理某些业务。那么这时候如果不做任何处理，就会出现如下典型的精度丢失问题。

console.log(0.1 + 0.2) ; // 0.30000000000000004

下面简要分析下原因：

1、Number 类型

js中数字类型只有Number 类型，Number 类型相当于其他强类型语言中的double类型(双精度浮点型)，不区分浮点型和整数型。Number 类型有四种进制表示方法，十进制，二进制，八进制和十六进制，这里只涉及到十进制和二进制。

二进制：0B或者0b (数字0和字母B或者小写字母b) ，后接1或者0表示二进制数

十进制：默认直接输入0-9都是十进制数

Number 类型使用 IEEE 754 格式表示整数和浮点值。

2、IEEE 754

64位二进制数表示一个数字，64位 = 1位符号位 + 11位指数位 + 52位小数位

符号位：用来表示数字的正负，-1^符号位数值，0为正数，1为负数

指数位：一般都用科学计数法表示数值大小，但是这里一般都是2进制的科学计数法，表示2的多少次方

小数位：科学计数法前面的数值，IEEE745标准，默认所有的该数值都转为1.xxxxx这种格式，优点是可以省略一位小数位，可以存储更多的数字内容，缺点是丢失精度。大概可以理解为这张图：

3、精度丢失

精度丢失的本质就是浮点数转化为该标准的二进制的过程中出现的丢失

整数转为二进制好理解，这里只介绍小数转二进制，问题出在小数转二进制上。由于也需要转化为指数形式，例如 1/2 = 1 * 2^-1, 1/4 = 1 * 2^-2,所以小数的转化二进制过程是通过判断小数是不是满 1/2，1/4，8/1以此类推，换成数学公式就是乘二取整法

0.1的二进制

0.1*2=0.2======取出整数部分0

0.2*2=0.4======取出整数部分0

0.4*2=0.8======取出整数部分0

0.8*2=1.6======取出整数部分1

0.6*2=1.2======取出整数部分1

0.2*2=0.4======取出整数部分0

0.4*2=0.8======取出整数部分0

0.8*2=1.6======取出整数部分1

0.6*2=1.2======取出整数部分1

接下来会无限循环

0.2*2=0.4======取出整数部分0

0.4*2=0.8======取出整数部分0

0.8*2=1.6======取出整数部分1

0.6*2=1.2======取出整数部分1

所以0.1转化成二进制是：0.0001 1001 1001 1001…（无限循环）

0.1 => 0.0001 1001 1001 1001…（无限循环）
复制代码

同理0.2的二进制是0.0011 0011 0011 0011…（无限循环）

转化为二进制后开始准备运算，计算机中的数字都是以二进制存储的，二进制浮点数表示法并不能精确的表示类似0.1这样的简单的数字。

如果要计算 0.1 + 0.2 的结果，计算机会先把 0.1 和 0.2 分别转化成二进制，然后相加，最后再把相加得到的结果转为十进制

但有一些浮点数在转化为二进制时，会出现无限循环 。比如上面的0.1和0.2。

而存储结构中的尾数部分最多只能表示 53 位。为了能表示 0.1，只能模仿十进制进行四舍五入，但二进制只有 0 和 1 ， 于是变为 0 舍 1 入 。 因此，0.1和0.2在计算机里的二进制表示形式如下：

0.1 => 0.0001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 101

0.2 => 0.0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 001

用标准计数法表示如下：

0.1 => (−1)0 × 2^4 × (1.1001100110011001100110011001100110011001100110011010)2

0.2 => (−1)0 × 2^3 × (1.1001100110011001100110011001100110011001100110011010)2

最终，“0.1 + 0.2” 在计算机里的计算过程如下：

指数         小数位
-3           0.1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1101 0
-3     +     1.1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 
------------------------------------------------------------------------------------
-3          10.0110 0110 0110 0110 0110 0110 0110 0110 0110 0110 0110 0110 0111 0
写为标准形式，整数部分化为1：
-2           1.0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 10
保留有效数字，舍入（10刚好在000与100中间，其舍入取决于前一位的值，0则舍，1则入）：
-2           1.0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0100
复制代码

经过上面的计算过程，0.1 + 0.2 得到的结果也可以表示为：

(−1)0 × 2−2 × (1.0011001100110011001100110011001100110011001100110100)2=>.0.30000000000000004

通过js将这个二进制结果转化为十进制表示：

(-1)0 * 2-2 * (0b10011001100110011001100110011001100110011001100110100 * 2**-52); //0.30000000000000004

因此会出现：

console.log(0.1 + 0.2) ; // 0.30000000000000004

这是一个典型的精度丢失案例，从上面的计算过程可以看出，0.1 和 0.2 在转换为二进制时就发生了一次精度丢失，而对于计算后的二进制又有一次精度丢失 。因此，得到的结果是不准确的。

4、解决办法

• 考虑到每次浮点数运算的偏差非常小(其实不然)，可以对结果进行指定精度的四舍五入，比如可以parseFloat(result.toFixed(12));

• 将浮点数转为整数运算，再对结果做除法。比如0.1 + 0.2，可以转化为(1*2)/3。

• 把浮点数转化为字符串，模拟实际运算的过程。

以上三点代码实现这里就不展示了，大家可以网上了解。

综上，建议使用第三种方案，目前已经有了很多较为成熟的库，我们可以根据自己的需求来选择对应的工具。并且，这些库不仅解决了浮点数的运算精度问题，还支持了大数运算，并且修复了原生toFixed结果不准确的问题。

以上内容有不足之处还请各位大佬指正。