问题描述
经常在前端开发的时候会遇到页面上小数显示很多位，而且一些明明很明确的结果，总会显示莫名其妙的数字，比如著名的 0.1 +0.2
我们的预想的结果是：0.3
而计算机给我们的结果：0.30000000000000004
问题原因
问题产生的原因在于，计算机存储的方式是二进制 （用0 1来表示数字），需要进行进制转换，十进制转换二进制时会丢失精度。
怎么进行转换的呢？
转换为二进制
-
正整数的转换规则
转换数 除2取余，商值 再除2取余，直到商数为1，余数依次倒序排列，高位补0
例如 33 对应的二进制数计算过程
计算 商数 余数 33 / 2 16 1 16 / 2 8 0 8 / 2 4 0 4 / 2 2 0 2 / 2 1 0 1 / 2 1 余数依次为： 100001
倒叙排列：100001（巧合，可取其他的数值计算）
高位补0： 0010 0001，计算机字节长度是定长的，比如 8位 16位 32 位，不够的高位补0
33 对应的二进制数为: 0010 0001。
-
负整数的转换规则
以 -33 为例
- 先按正整数，结果为：0010 0001
- 逐位取反（1取0，0取1），结果为：1101 1110
- 结果再加一（逢2进1），最终的结果为：1101 1111
-
小数的转换规则
小数部分乘以2，取结果的整数部分，依次类推知道小数部分为0，或者位数足够。
小数 结果 整数部分 0.125*2 0.25 0 0.25*2 0.5 0 0.5*2 1.0 1
整数部分正序排列，0.25对应的二进制结果：0.001
- 既有整数又有小数的，分开计算即可，整数部分和小数部分
二进制转换为十进制
-
整数转换为十进制
先看首位，0 表示正整数
1表示负整数
以33 对应的二进制（0010 0001）为例：
二进制数 计算 2的次幂 结果 1 1*2 0 1 0 0*2 1 0 0 0*2 2 0 0 0*2 3 0 0 0*2 4 0 1 0*2 5 32 结果依次相加 1+0+0+0+0+32 = 33
正整数的总结为：二进制数值 * 2的（当前所在位置数（右到左）-1）次幂 所得结果相加
那么 -33 对应的二进制（1101 1111），首位为1，对应的是负数
先将结果-1 （1101 1110）
再逐位取反 （0010 0001）
再按正整数计算（1乘以10的5次幂 + 1* 10的-1次幂 = 33）
加上负号即可
-
二进制小数转换为整数
以0.001为例
整数部分 0 * 2的0次幂 ——> 0
小数部分 0 * 2的-1次幂 ——> 0
小数部分 0 * 2的-2次幂 ——> 0
小数部分 1 * 2的-3次幂 ——> 0.125
既有整数又有小数的，分开计算即可，整数部分和小数部分
问题来了
0.1怎么用二进制表示呢？
0.1 * 2 = 0.2 ——> 0
0.2 * 2 = 0.4 ——> 0
0.4 * 2 = 0.8 ——> 0
0.8 * 2 = 1.6 ——>1
0.6 * 2 = 1.2 ——> 1 // 开始无尽循环了
0.2 * 2 = 0.4 ——> 0
二进制无法精确的表示数值 0.1，而到一定的位数时，势必会截取，二进制在反算成十进制的时候就会出现和最初的值有误差的情况。
这就是0.1 + 0.2 = 0.3，计算机反而会出现多位小数的原因。
解决办法
先将小数转换为整数,再将结果转换为小数
0.1*10+ 0.2 * 10 = 3 ———> /10 = 0.3
延伸
如果结果不要求特别精确，可以先计算，再将最终结果保留小数，注意计算过程中最好不要取舍，最后的结果再保留小数。
踩过的坑，血与泪
遇到计算的而计算的数值不确定是整数还是小数的，最好有个统一的函数处理，以防后期再修改大量的代码。
再不济，在最终要显示的结果数值上保留一个处理格式的函数。
不要相信客户说，这些计算都是整数什么的，他会随时反悔，而你要忙着问候* * * * *，所以未雨绸缪吧。
