前端应该知道的JavaScript浮点数和大数的原理

不知道你们在平时的搬砖中有没有遇到过一些JavaScript数字相关的坑，好比比较经典的0.1+0.2=0.3000000000000000四、JavaScript有一个Number.MAX_VALUE还有一个Number.MAX_SAFE_INTEGER等等问题。若是这些问题不了解清楚，业务开发中颇有可能会出现一些很奇怪的问题。

几个问题

先抛出几个问题

1. 为何0.1+0.2 != 0.3？
   
2. 为何1.005.toFixed(2)=1.00而不是1.01
3. 为何会有Number.MAX_VALUE和Number.MAX_SAFE_INTEGER这两个常量同时存在？

接下来就以这三个问题为目的来梳理一下前因后果。

双精度存储

首先在开始以前须要了解一下JavaScript的number类型在计算机中是如何存储的，这也是一切问题的基础。JavaScript的数字都是number类型的，不论是整数仍是浮点数都以IEEE754双精度的格式存储在计算机中，什么是双精度呢？就是以64个bit位来存储，具体的存储格式是：

分别是1个符号位+11个指数位+52个尾数位

举个例子，若是是5.5这个数字的话，则计算过程是这样的：
5.5 转二进制 =====> 101.1 科学计数法 =====> 1.011*2^2 
存入计算机： 
符号位：0 
指数位：2 加1023 =====> 1025 转二进制 =====> 10000000001 
尾数位：1.011 隐去小数点左边的1 =====> 011

存入计算机，以下图，截图来自IEEE754可视化，感兴趣能够把玩一下

接下来进入第一个问题

为何0.1+0.2 != 0.3？

在浏览器控制台能够测试一下结果：

下面就剥茧抽丝的讲一下为何会这样

0.1 转二进制 =====> 0.0001100110011001100...(1100循环) 
 转科学计数法 =====> 1.100110011...(1100循环) *2^-4 
数据是无限循环的，可是可供使用的尾数位倒是有限的，只有52位可使用，因此在第53位会被舍去而且进位

最终在计算机中存储以下图：

相似的0.2在计算机中的存储以下图：

因此最终的计算就是：

0.00011001100110011001100110011001100110011001100110011010 + 0.0011001100110011001100110011001100110011001100110011010 = 0.0100110011001100110011001100110011001100110011001100111

计算结果转换为十进制数字就是0.30000000000000004

因此就是由于，0.1和0.2在计算机中的二进制存储会让它们自己损失掉必定的精度，而它们在计算机中的二进制存储转换成十进制时已经不是真正的0.1和0.2了，相加的结果也就天然不是0.3了。

问题来了，既然0.1在计算机中的存储已经有了舍入偏差，那为何num=0.1能获得0.1呢？

能够在控制台使用 toPrecision看一下0.1在不一样精度下的返回

能够看出来其实0.1是截断了一部分精度后获得的结果，那么这个问题就能够转化为：双精度浮点数是按什么规则来截断的呢？

在双精度浮点数的英文wiki中能够找到中能够找到这么一段话：

大意是：若是一个 IEEE 754 的双精度浮点数被转成至少含17位有效数字的十进制数字字符串，当这个字符串转回双精度浮点数时，必需要跟原来的数相同；换句话说，若是一个双精度的浮点数转为十进制的数字时，只要它转回来的双精度浮点数不变，精度取最短的那个就行。

拿0.1来举例子，0.1和0.10000000000000001转成双精度浮点数的存储是同样的，因此取最短的0.1就好了。

接下来是第2个问题

为何1.005.toFixed(2)=1.00而不是1.01

由于在第一个问题中已经说了，一个十进制数字转为双精度浮点数而后再取出来时，跟原十进制数字可能会有偏差，试一下1.005取20个精度：

很明显1.005只是一个被截断后的数字，它的双精度浮点数表明的20位精度的数字是1.0049999999999998934，因此进行保留2位的四舍五入时，2位后的数字会被所有舍去。

为何会有Number.MAX_VALUE和Number.MAX_SAFE_INTEGER这两个常量同时存在？

能够在控制台看一下：

为何最大安全整数是2^53-1？前面说到了JavaScript浮点数存储是52位尾数位，可是由于科学计数法小数点左侧的1会在存储时省去，因此52位尾数+省去的1位=53个可表示的位数。

二进制的53位全是1时转换为十进制既是：2^53-1=9007199254740991

哪为何2^53-1是最大安全整数呢？比它大会怎样？

在浏览器试一下：

以2^53来讲明一下为何2^53-1是最大安全整数，安全在哪里

2^53 转二进制 =====> 100000000000000000000000000000000000000000000000000000(53个0)
 转为科学计数法 =====> 1.00000000000000000000000000000000000000000000000000000(53个0)*2^53 
存入计算机 =====> 尾数位只有52位因此截掉末尾的0只能存52个0 
2^53+1 转二进制 =====> 100000000000000000000000000000000000000000000000000001(52个0) 
转为科学计数法 =====> 1.00000000000000000000000000000000000000000000000000001(52个0) 
存入计算机 =====> 尾数位只有52位因此截掉末尾的1只能存52个0

能够看出来，2^53和2^53+1在计算机中的存储尾数和指数都相同，因此两个不一样的数在计算机中的存储是同样的，这样就很是的不安全了。

因此2^53-1是JavaScript里面的最大安全整数。至于Number.MAX_VALUE，就是把尾数位和指数位都设为1再转为十进制就行了。

如何解决

上面的说到的浮点数运算、舍入运算、大数运算，均可以使用 bignumber这个库来解决，打开连接在控制台就能够写demo。

后记

业务中不少难缠的bug每每是基础知识了解的不够深刻形成的，了解这些原理能够清晰的知道本身在写什么，而且快速的debug，不至于陷入cv（control+C、control+V）工程师的循环中。