一文大白话讲清楚javascript浮点数精度丢失和解决策略

1.问题的来源北京

• 我们先看一个经典javascript问题，关于等值判断

let num=0.1+0.2
console.log(num==0.3)//false
console.log(num===0.3)//false

• 虎躯一震，啊，0.1+0.2竟然不等于0.3，那是为什么呢
• 问题就出在0.1+0.2在计算机语言中还真不等于0.3
• 为啥呢，原因在于计算机对于浮点数的二进制储存方式而导致的，
• 0.1在计算机里的二进制储存方式为0.00011001100110011001100110011001100110011001100110011010
• 0.2为0.0011001100110011001100110011001100110011001100110011010
• 加起来等于0.0100110011001100110011001100110011001100110011001100111
• 转化为十进制等于是 0.30000000000000004
• 这不就是是 0.1+0.2=0.30000000000000004！=0.3的原因了
• 那又蒙了，这么长一串010101又是个啥呀，别急，咱们下面开始讲

2. 浮点数的存储二进制存储

• 我们知道，计算机的万事万物，最后都要归化为01序列，计算机才能识别并计算
• 浮点数也一样，浮点数要进入计算，必须转化为二进制的01序列才可以计算。
• 但是有个问题，就是我们知道浮点数有有限和无限之说。
• 1÷2=0.5这是有限的，我们把0.5转化成二进制就可以
• 但是碰到像1÷3=0.3333333…无限循环这种，那就没法整了。因为存储空间是有限，数是无限的，肯定存不了。那怎办，只能取一个近似值来替代。
• 在js里面，浮点数属于Number类型，Number类型采用的IEEE754规范的64位双精度浮点编码。
• 对于一个整数，我们很随意的转化为二进制，这没问题，
• 但对于浮点数来说，有一个小数点的存在， 转化后的二进制小数点位置不统一。最好是让小数点位置固定，怎么办，用二进制科学计数法。
• X=a*2^e
• a的值为或者1，e为小数点移动的位置
• 比如，27.0转化成二进制为11011.0
• 用科学计数法表示
• 1.10110*2^4
• js是双精度浮点数存储，长度为8个字节，也就是64个比特位
• 第一位S，是符号位，代表正负
• 其后的11为指数，可正可负，指数的偏移量为1023，1位正负 +10位指数量，所以偏移量是1023
• 最后的52位是尾数，超出的部分自动进1舍0
• 所以27.0,，转化为二进制
• 就是0+10000000011+011 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000
• 这就就明白了吧

3.精度丢失解决方案

1. 整数法

• 先把浮点数化为整数，操作再转为浮点数。比如把0.1和0.2分别*10，计算完以后，再÷10

console.log((0.1*10+0.2*10)*10===0.3)//true

2. 使用foFixed限制小数点位置

let num=0.1+0.2
console.log(parseFloat(num.toFixed(1))===0.3)//true
//之所以使用parseFloat转化num。toFixed，是因为num。toFixed返回的是字符串形式的"0.3"

3. 利用第三方库

• decimal.js或bignumber.js这样更加准确的库去计算