面试官：说说 JavaScript 数字精度丢失的问题，解决方案？

偏执的太偏执、 2022-11-10 14:16 213阅读 0赞

![ed9f7c6906b7b05b844e60dea136d2e8.png][]

## 一、场景复现 ##

一个经典的面试题

0.1 + 0.2 === 0.3 // false

为什么是`false`呢?

先看下面这个比喻

比如一个数 1÷3=0.33333333......

这是一个除不尽的运算，3会一直无限循环，数学可以表示，但是计算机要存储，方便下次再使用，但0.333333...... 这个数无限循环，再大的内存它也存不下，所以不能存储一个相对于数学来说的值，只能存储一个近似值，这么存储后再取出时自然就出现精度丢失问题

## 二、浮点数 ##

“浮点数”是一种表示数字的标准，整数也可以用浮点数的格式来存储

我们也可以理解成，浮点数就是小数

在`JavaScript`中，现在主流的数值类型是`Number`，而`Number`采用的是`IEEE754`规范中64位双精度浮点数编码

这样的存储结构优点是可以归一化处理整数和小数，节省存储空间

对于一个整数，可以很轻易转化成十进制或者二进制。但是对于一个浮点数来说，因为小数点的存在，小数点的位置不是固定的。解决思路就是使用科学计数法，这样小数点位置就固定了

而计算机只能用二进制（0或1）表示，二进制转换为科学记数法的公式如下：

![9b8ff90d11c9801a96ee64c1faadea44.png][]

其中，`a`的值为0或者1，e为小数点移动的位置

举个例子：

27.0转化成二进制为11011.0 ，科学计数法表示为：

![114f9222a9ed344af989a4a925620afb.png][]

前面讲到，`javaScript`存储方式是双精度浮点数，其长度为8个字节，即64位比特

64位比特又可分为三个部分：

*  符号位S：第 1 位是正负数符号位（sign），0代表正数，1代表负数
 *  指数位E：中间的 11 位存储指数（exponent），用来表示次方数，可以为正负数。在双精度浮点数中，指数的固定偏移量为1023
 *  尾数位M：最后的 52 位是尾数（mantissa），超出的部分自动进一舍零

如下图所示：

![99f911bfefe26ed9b60cad0adb6a6bd1.png][]

举个例子：

27.5 转换为二进制11011.1

11011.1转换为科学记数法![format_png][]

符号位为0(正数)，指数位为4+，1023+4，即1027

因为它是十进制的需要转换为二进制，即 `10000000011`，小数部分为`10111`，补够52位即：1011 1000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000\`

所以27.5存储为计算机的二进制标准形式（符号位+指数位+小数部分 (阶数)），既下面所示

0+10000000011+011 1000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000\`

## 二、问题分析 ##

再回到问题上

0.1 + 0.2 === 0.3 // false

通过上面的学习，我们知道，在`javascript`语言中，0.1 和 0.2 都转化成二进制后再进行运算

// 0.1 和 0.2 都转化成二进制后再进行运算
    0.00011001100110011001100110011001100110011001100110011010 +
    0.0011001100110011001100110011001100110011001100110011010 =
    0.0100110011001100110011001100110011001100110011001100111
    
    // 转成十进制正好是 0.30000000000000004

所以输出`false`

再来一个问题，那么为什么`x=0.1`得到`0.1`？

主要是存储二进制时小数点的偏移量最大为52位，最多可以表达的位数是`2^53=9007199254740992`，对应科学计数尾数是 `9.007199254740992`，这也是 JS 最多能表示的精度

它的长度是 16，所以可以使用 `toPrecision(16)` 来做精度运算，超过的精度会自动做凑整处理

.10000000000000000555.toPrecision(16)
    // 返回 0.1000000000000000，去掉末尾的零后正好为 0.1

但看到的 `0.1` 实际上并不是 `0.1`。不信你可用更高的精度试试：

0.1.toPrecision(21) = 0.100000000000000005551

如果整数大于 `9007199254740992` 会出现什么情况呢？

由于指数位最大值是1023，所以最大可以表示的整数是 `2^1024 - 1`，这就是能表示的最大整数。但你并不能这样计算这个数字，因为从 `2^1024` 开始就变成了 `Infinity`

> Math.pow(2, 1023)
    8.98846567431158e+307
    
    > Math.pow(2, 1024)
    Infinity

那么对于 `(2^53, 2^63)` 之间的数会出现什么情况呢？

*  `(2^53, 2^54)` 之间的数会两个选一个，只能精确表示偶数
 *  `(2^54, 2^55)` 之间的数会四个选一个，只能精确表示4个倍数
 *  ... 依次跳过更多2的倍数

要想解决大数的问题你可以引用第三方库 `bignumber.js`，原理是把所有数字当作字符串，重新实现了计算逻辑，缺点是性能比原生差很多

### 小结 ###

计算机存储双精度浮点数需要先把十进制数转换为二进制的科学记数法的形式，然后计算机以自己的规则\{符号位+(指数位+指数偏移量的二进制)+小数部分\}存储二进制的科学记数法

因为存储时有位数限制（64位），并且某些十进制的浮点数在转换为二进制数时会出现无限循环，会造成二进制的舍入操作(0舍1入)，当再转换为十进制时就造成了计算误差

## 三、解决方案 ##

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

当你拿到 `1.4000000000000001` 这样的数据要展示时，建议使用 `toPrecision` 凑整并 `parseFloat` 转成数字后再显示，如下：

parseFloat(1.4000000000000001.toPrecision(12)) === 1.4  // True

封装成方法就是：

function strip(num, precision = 12) {
      return +parseFloat(num.toPrecision(precision));
    }

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

/**
     * 精确加法
     */
    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;
    }

最后还可以使用第三方库，如`Math.js`、`BigDecimal.js`

## 参考文献 ##

*  https://zhuanlan.zhihu.com/p/100353781
 *  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/BigInt

\--The End--

系列正在更新：27/33

*  [面试官：说说你对正则表达式的理解？应用场景？][Link 1]  
    
 *  [面试官：说说你对DOM的理解，常见的操作有哪些？][DOM]
 *  [面试官：说说你对BOM的理解，常见的BOM对象你了解哪些？][BOM_BOM]
 *  [面试官：JavaScript中本地存储的方式有哪些？区别及应用场景？][JavaScript]
 *  [面试官：举例说明你对尾递归的理解，有哪些应用场景][Link 2]
 *  [面试官：说说 JavaScript 中内存泄漏的几种情况？][JavaScript 1]
 *  [面试官：说说你对函数式编程的理解？优缺点？][Link 3]
 *  [面试官：JavaScript中如何实现函数缓存？有哪些应用场景？][JavaScript 2]  
    
    
    篇副有限，扫下方二维码查看往期

![5db44fa0880aa8b81bc64f71b5004d24.png][]

[ed9f7c6906b7b05b844e60dea136d2e8.png]: /images/20221022/b07e7ef07c8d4d0bba5a65ca7ca15add.png
[9b8ff90d11c9801a96ee64c1faadea44.png]: /images/20221022/3cd4d499a71b4b0aa4bdd4248cb8b102.png
[114f9222a9ed344af989a4a925620afb.png]: /images/20221022/74866ab2ddc74660a25dc2dc4e8fb056.png
[99f911bfefe26ed9b60cad0adb6a6bd1.png]: /images/20221022/257d0066aa2847fa8e747c4541671d4d.png
[format_png]: /images/20221022/bbd4c8d4bca64793b35c790697157892.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c81acb67410c458664ea37ee0598e0e85783afdc771e92772c2e3f619d465002d8897bc7&idx=2&mid=2247486028&scene=21&sn=7efbff142f8966159b2fb1cdfee22f34#wechat_redirect
[DOM]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c8d0cb6741c63fa8c57b9b563b52ed2bf784c07980cbd832eb847cfd3f20b3f6d93f9735&idx=1&mid=2247486086&scene=21&sn=2a4320d54a65d71a5d5aab42dcde4e52#wechat_redirect
[BOM_BOM]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c8cacb6741dce70f20ce120ee69fef2a8310513a62af0b84dc9f838f8f16a0d4cd0ae7ce&idx=2&mid=2247486108&scene=21&sn=d8feb34e4273ccca56e79853030e7036#wechat_redirect
[JavaScript]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c92dcb67403b70aa91ea4c905b9132bbfe23878e956b9e45e25c395c4453d51effb7cc51&idx=2&mid=2247486331&scene=21&sn=dd7f3d2184ba37997986e19dd1765027#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c8fccb6741ea44a2bdec53066645ee306ebda5e8888acece65811a2578aa94cf5ff1f7e6&idx=1&mid=2247486122&scene=21&sn=9c6642610382251b87ba1cc6d128ed72#wechat_redirect
[JavaScript 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c894cb674182fc3696d53ed6e78f18fb64c21b8c8fc885c8f15c7a804abdb6d248faa1e1&idx=2&mid=2247486146&scene=21&sn=4acf4a04b4930e1c57636ab83f7ebaae#wechat_redirect
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c9facb6740ecf20a77cb83643ceef19aa93b901b54661a146508e163fccde666c2602419&idx=1&mid=2247486380&scene=21&sn=309ded50f9a3081cbb1554fe6823fa92#wechat_redirect
[JavaScript 2]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c996cb674080eb9f5dae070a996ff8964f6b663ef195f2b848abb0c2f2773e1c1530b177&idx=2&mid=2247486400&scene=21&sn=d19cfdddc3838b3b1c7263d1a7f8695a#wechat_redirect
[5db44fa0880aa8b81bc64f71b5004d24.png]: https://img-blog.csdnimg.cn/img_convert/5db44fa0880aa8b81bc64f71b5004d24.png