原文地址：http://eux.baidu.com/blog/fe/关于js中的浮点运算
???? 阅读本文需要的：
能将十进制的整数或小数换算成二进制且知道原理
知道原码补码反码，且掌握二进制的加减
有好奇心有耐心
前几天偶然跟人家聊到 javascript 有一个很好玩的事情， 0.1 + 0.2 = 0.30000000000000004。稍微有经验大概能反应出来这是存储时数据长度截取产生的原因，但是具体是计算机怎么计算的呢，自己也解释不清，于是带着好奇稍微探索了一下。（ps：实际上并不是只有 javascript 存在这种问题，具体可以看看 http://0.30000000000000004.com/ 这个网站。）
浮点数在计算机中的存储
IEEE标准
首先科普一下 js 中使用的二进制浮点数算术标准 IEEE_754 他采用的存储格式为：
E = (-1)^1 × M × 2^E(-1)^s表示符号位，当s=0，V为正数；当s=1，V为负数。
M表示有效数字，大于等于1，小于2。
2^E表示指数位。
举例来说，十进制的 5.0，写成二进制是 101.0，相当于 1.01×2^2。那么，按照上面 V 的格式，可以得出 s=0，M=1.01，E=2。十进制的 -5.0，写成二进制是 -101.0，相当于 -1.01×2^2。那么，s = 1，M = 1.01，E = 2。
存储格式
对于32位的浮点数，最高的1位是符号位s，接着的8位是指数E，剩下的23位为有效数字M。

对于64位的浮点数，最高的1位是符号位S，接着的11位是指数E，剩下的52位为有效数字M。

这里只简单说一下第一种情况存储时的一些点：
尾数 M
IEEE 754规定，在 计算机内部保存M时，默认这个数的第一位总是1，因此可以被舍去，只保存后面的xxxxxx部分 。比如保存 1.01 的时候，只保存 01，等到读取的时候，再把第一位的 1 加上去。这样做的目的，是节省 1 位有效数字。以 32 位浮点数为例，留给 M 只有 23 位，将第一位的 1 舍去以后，等于可以保存 24位有效数字。
指数E
指数 E 的情况稍微复杂一点点。
首先，E为一个无符号整数）。这意味着，如果 E 为 8 位，它的取值范围为 0~255；如果 E 为 11 位，它的取值范围为 0~2047。但是，我们知道，科学计数法中的 E 是可以出现负数的，所以 IEEE 754规定，E的真实值必须再减去一个中间数，对于8位的E，这个中间数是127；对于11位的E，这个中间数是1023。
比如，2^10 的 E 是10，当保存成 32 位浮点数时，必须保存成 10 + 127 = 137，即 10001001。如果要保存成 64 位浮点数的时候，就会保存成 10 + 1023 = 1033，即 10000001001。
然后，指数E还可以再分成三种情况：

E 不全为 0 或不全为 1。这时，浮点数就采用上面的规则表示，即指数 E 的计算值减去 127（或1023），得到真实值，再将有效数字 M 前加上第一位的 1。
E 全为 0。这时，浮点数的指数E等于 1-127（或者1-1023），有效数字M不再加上第一位的 1，而是还原为 0.xxxxxx 的小数。这样做是为了表示 ±0，以及接近于 0 的很小的数字。
E 全为 1。这时，如果有效数字 M 全为0，表示±无穷大（正负取决于符号位s）；如果有效数字M不全为0，表示这个数不是一个数（NaN）。
浮点数转换为二进制方法
浮点数转换成二进制，我们要将整数部分和小数部分分开，大概就是整数部分采用除2取余倒叙记录，小数部分采用乘2取整顺序记录。具体例子和实现方式可自行搜索。
以 0.1 为例，0.1的二进制
0.1
x 2
-------
0.2 0
x 2
-------
0.4 0
x 2
-------
0.8 0
x 2
-------
0.6 1
x 2
-------
0.2 1
------- 又从0.2开始循环了
于是，我们得到了 0.1 的二进制表示，为 0.0001100110011(0011循环)，即 1.100110011(0011) * 2^-4 在计算机中的存储表达里，符号 s=0，尾数 M = 1.100110011(0011)，阶码 E = -4，实际存储为 -4+1023 = 1019 的二进制 1111111011。由于 javascript 是双精度的，所以 0.1 在计算机中存储格式为：
0 01111111011 1001100110011001100110011001100110011001100110011010
--------------------------------------------------------------------
s exp(11位) frac(52位，注意存储时候前面的1会舍去，最后一位进1)
同理，0.2 的二进制表示为 0.001100110011(0011循环)，即 1.100110011(0011)*2^-3 在计算机中的存储表达里，符号 s=0，尾数 M = 1.100110011(0011)，阶码 E = -3，实际存储为 -3+1023 = 1020 的二进制 1111111100。在计算机中存储格式为：
0 01111111100 1001100110011001100110011001100110011001100110011010
--------------------------------------------------------------------
s exp(11位) frac(52位，注意存储时候前面的1会舍去，最后一位进1)
运算
存储讲完，接下来就该聊下浮点数的加减运算了，它一般有6个步骤完成，先补充一下理论知识：
（1）对0、Infinity 和 NaN 操作数作检查，若有一个操作数为NaN则直接返回NaN;若有一个操作数为0则直接返回另一个操作数;若有一个操作数为Infinity,若另一个操作数也是Infinity且符号相同则返回第一个操作数;若另一个操作数也是Infinity且符号不同则返回NaN;若其他情况则返回Infinity。
（2）对阶：对阶是将两个进行运算的浮点数的阶码对齐的操作。因为只有使两浮点数的指数值部分相同，才能将相同的指数值作为公因数提出来，然后进行尾数的加减运算。具体方法为：求出两浮点数阶码的差，即⊿E＝Ex-Ey，将小阶码加上⊿E，使之与大阶码相等，同时将小阶码对应的浮点数的尾数右移相应位数，以保证该浮点数的值不变。几点注意：
对阶的原则是小阶对大阶。因为若大阶对小阶，则尾数的数值部分的高位需移出，而小阶对大阶移出的是尾数的数值部分的低位，这样损失的精度更小。
采用补码表示的尾数右移时，符号位保持不变。
由于尾数右移时是将最低位移出，会损失一定的精度，为减少误差，可先保留若干移出的位，供以后舍入处理用。
（3）尾数运算：主要为进行完成对阶后的尾数相加减的相关操作（包含隐藏位），采用双符号法判断是否溢出。
（4）结果规格化，主要分为三种 向右规格化：若上一步出现溢出，则尾数右移1位，阶码+1; 向左规格化：若上一步没有出现溢出，且数值域最高位与符号位数值相同，则尾数左移1位且阶码-1，直到数值域最高位为1为止。
（5）舍入处理：由于浮点数无法精确表示所有数值，因此在存储前必须对数值作舍入操作。具体有五种方式，这里我们只谈 IEEE 754 默认的舍入模式：就近舍入 Round to nearest, ties to even：就是我们日常所说的四舍五入，当存在两个数一样接近时，取偶数值(如2.4舍入为2，2.6舍入为3；2.5舍入为2，1.5舍入为2)。另外还有 round toward +∞，round toward -∞，round toward 0 这三种模式，有兴趣的可自行查相关资料。
（6）溢出判断：与定点数运算不同的是，浮点数的溢出是以其运算结果的阶码的值是否产生溢出来判断的。若阶码的值超过了阶码所能表示的最大正数，则为上溢，进一步，若此时浮点数为正数，则为正上溢，记为 +∞，若浮点数为负数，则为负上溢，记为-∞；若阶码的值超过了阶码所能表示的最小负数，则为下溢，进一步，若此时浮点数为正数，则为正下溢，若浮点数为负数，则为负下溢。正下溢和负下溢都作为 0 处理。
一堆理论扯完之后，我们来看 0.1 + 0.2 的运算过程。原本的 0.1 和 0.2 的二进制表示
0.1 = 1.1001100110011001100110011001100110011001100110011010 * 2^-4
0.2 = 1.1001100110011001100110011001100110011001100110011010 * 2^-3
可以看到，0.1 的阶码为 -4，0.2 的阶码为 -3，依照小阶对大阶的原则，我们需要将 0.1 的阶码变为 -3，因此其尾数部分需要右移一位。对阶之后 0.1 的存储为：
0.1 = 0.11001100110011001100110011001100110011001100110011010 * 2^-3
想右移一位导致尾数需要进行阶段，因为最后一位刚好是0，所以这里直接舍弃，因此 0.1 对阶之后的存储为
0 01111111100 1100110011001100110011001100110011001100110011001101
--------------------------------------------------------------------
s exp(阶码-3) frac
然后我们就可以愉快的进行相加这个运算步骤了：
0 01111111100 1100110011001100110011001100110011001100110011001101
+ 0 01111111100 1001100110011001100110011001100110011001100110011010
计算的话，手动画一画也没啥大问题，不过身为程序员就比较懒了，这里我们写一个二进制相加的方法：
const a = "1100110011001100110011001100110011001100110011001101".split('');
const b = "1001100110011001100110011001100110011001100110011010".split('');
const res = [];
let flag = 0;
for (let i = a.length - 1; i >= 0; i--) {
const ai = parseInt(a[i]);
const bi = parseInt(b[i]);
const cur = (ai ^ bi) ^ flag; // 当前数值
flag = (ai + bi + flag) >= 2 ? 1 : 0; // 进位
res.unshift(cur);
if (i === 0 && flag === 1) {
res.unshift(flag);
}
}
console.log(res.join(''));
// 10110011001100110011001100110011001100110011001100111得出：
0 01111111100 1100110011001100110011001100110011001100110011001101
+ 0 01111111100 1001100110011001100110011001100110011001100110011010
-------------------------------------------------------------------
= 0 01111111100 10110011001100110011001100110011001100110011001100111
可以看到发生了进位，此时尾数超过52，因此阶码部分加1（乘以2），即阶码由原来的 -3 变为 -2，所以阶码部分为 01111111101。而尾数部分右移一位（除以2），进行舍入（最后一位是1因此最低位进位），得到52位新的二进制表示为：
1011001100110011001100110011001100110011001100110011 11011001100110011001100110011001100110011001100110100
所以，最终的计算结果在计算机中的存储表达如下：
0 1111111101 1011001100110011001100110011001100110011001100110100
将其转换成十进制数为：
2^-2 + (1+(1*2^-1 + 0 * 2^-2+1*2^-3+1*2^-4+... ) = 0.3000000000000000444089209850062616169452667236328125
由于精度问题，只取到 0.30000000000000004。
然后看看 0.3.toString(2) 的结果 �
console.log(0.3.toString(2) );
// 0.010011001100110011001100110011001100110011001100110011写在最后
好了，我们已经知道为什么 0.1 + 0.2 !== 0.3 的原因了，主要由于 0.1 和 0.2 转为二进制的时候为无限循环小数，而计算机的存储位置有限因此会做一定的截取舍入处理，再进行加减就有一定的误差了。
另外，由于js并没有特别区分整型和浮点型，实际上整型在 js 里面也是用浮点数的结构存储的，不过放在了尾数部分，以便于在计算过程总能随意自由切换。所以实际应用中，由于一些精度问题，比如后端数据库传来一个 ID 字段可能就会大于这个值，调用 JSON.parse 的时候就会丢失精度了，因此对于某些过大过小的数字需要用字符串存储。那要怎么在 js 中尽可能准确的计算出结果，以及怎么判断两个小数是否相等呢，敬请期待下回分解～
参考资料
IEEE_754-1985
how to round binary fractions
浮点数的二进制表示
细说浮点数
https://news.ycombinator.com/item?id=10558871
▼
原创系列推荐
▼
5. Webpack4 入门（上）|| Webpack4 入门（下）
6. MobX 入门（上） || MobX 入门（下）
7. 59篇原创系列汇总
回复“加群”与大佬们一起交流学习~
点这，与大家一起分享本文吧~