0.1+0.2 引发的关于前端显示数值小数位数问题

问题描述

---

经常在前端开发的时候会遇到页面上小数显示很多位，而且一些明明很明确的结果，总会显示莫名其妙的数字，比如著名的 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

延伸

---

如果结果不要求特别精确，可以先计算，再将最终结果保留小数，注意计算过程中最好不要取舍，最后的结果再保留小数。

踩过的坑，血与泪

---

遇到计算的而计算的数值不确定是整数还是小数的，最好有个统一的函数处理，以防后期再修改大量的代码。

再不济，在最终要显示的结果数值上保留一个处理格式的函数。

不要相信客户说，这些计算都是整数什么的，他会随时反悔，而你要忙着问候* * * * *，所以未雨绸缪吧。