JavaScript 浮点数陷阱

最近看了一篇关于 JavaScript 浮点数陷阱的文章，写的挺不错，怕以后找不到了，我在这里自己再总结一份。

问题

在 JS 的运算中经常会遇到这样的问题：

 0.1 + 0.2 = 0.30000000000000004    
 1 - 0.9 = 0.09999999999999998

这些都是由与浮点数误差导致的问题。具体的分析，请往下看。

浮点数存储

JavaScript 中所有数字包括整数和小数都只有一种类型 — Number。它的实现遵循 IEEE 754 标准，使用 64 位固定长度来表示，也就是标准的 double 双精度浮点数（相关的还有float 32位单精度）。

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

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

• 符号位S：第 1 位是正负数符号位（sign），0代表正数，1代表负数
• 指数位E：中间的 11 位存储指数（exponent），用来表示次方数
• 尾数位M：最后的 52 位是尾数（mantissa），超出的部分自动进一舍零
  

实际数字就可以用以下公式来计算：

注意以上的公式遵循科学计数法的规范。

E 是一个无符号整数，因为长度是11位，取值范围是 0～2047。但是科学计数法中的指数是可以为负数的，所以再减去一个中间数 1023，[0,1022]表示为负，[1024,2047] 表示为正。所以指数就可以表示为 E - 1023。

M 在十进制是为 0<M<10，到二进制就是 0<M<2。也就是说二进制的整数部分只能是1，所以可以被舍去，只保留后面的小数部分，所以尾数部分就可以多表示一位（53位），即 M + 1。

最终公式变成：

举个例子，按照公式， 4.5 转换成二进制就是 100.1，科学计数法表示是 1.001*2^2，舍去整数部分1后 M = 001 ，E = 1025。用图表示为：（图片生成工具链接）

分析问题

经过对浮点数存储的了解，下面我们来分析为什么在 JS 中
0.1 + 0.2 = 0.30000000000000004 ?

1、将 0.1 转换成二进制为 0.0001100110011001100（1100循环）
2、科学计数法表示为 1.100110011001100*2^-4，所以 E=-4+1023=1019，M=100110011...（去掉首位1）。最终为:

仔细看后几位标红的地方，由于存储限制，后面的几位进行了进位运算。所以将存储的数再转化成十进制后为 0.100000000000000005551115123126 ，这就出现了浮点误差。

同上面步骤一样将 0.1 和 0.2 都转成二进制浮点数后再做运算：

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

// 转成十进制正好是 0.30000000000000004

解决方法

1、用 toPrecision 方法将运算结果转化精度后再用 parseFloat 转成数字。

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

为什么选择 12 做为默认精度？这是一个经验的选择，一般选12就能解决掉大部分0001和0009问题，而且大部分情况下也够用了，如果你需要更精确可以调高。

2、把小数转成整数后再运算。

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

参考文章

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