js解决数字小数计算出现的精度丢失问题（2024-05-24）

精度丢失的原因

js小数进行数值运算时出现精度丢失问题

JavaScript 的number类型在进行运算时都先将十进制转二进制，此时，小数点后面的数字转二进制时会出现无限循环的问题。

为了避免这一个情况，要舍0进1，此时就会导致精度丢失问题

1、精度缺失

例如：0.1 + 0.2

0.1 也就是0.0001100110011001100110011001100110011001100110011001101
0.2 也就是0.001100110011001100110011001100110011001100110011001101
 
即：
0.00011001100110011001100110011001100110011001100110011010 +
0.0011001100110011001100110011001100110011001100110011010 =
0.0100110011001100110011001100110011001100110011001100111

0.1+0.2 = 0.30000000000000004

结果0.0100110011001100110011001100110011001100110011001100111

再转换成十进制就是0.30000000000000004。

let num = 0.1 + 0.2 
// 0.30000000000004

let num = 0.1*0.2
// 0.020000000000000004

2、解决办法

(1) 方法1

保留是几位小数，就先乘以位数的倍数（10表示一位），然后再除

要保留1位小数，就乘以10，然后再除10；

要保留2位小数，就乘以100，然后再除以100

0.14+0.1541
//0.29410000000000003

Math.floor((0.14+0.1541)*10)/10
//0.2

Math.floor((0.14+0.1541)*100)/100
//0.29

Math.floor((0.14+0.1541)*1000)/1000
//0.294

(2) 方法2

使用toFixed 保留小数位数

0.1+0.2334
//0.33340000000000003

(0.1+0.2334).toFixed()
//'0'

(0.1+0.2334).toFixed(1)
//'0.3'

(0.1+0.2334).toFixed(2)
//'0.33'

(0.1+0.2334).toFixed(3)
//'0.333'

(3) 方法3 更推荐

10乘以小数的长度

计算的小数后的位数*10倍数

function add(num1, num2) {
  const num1Len = (num1.toString().split('.')[1] ).length;
  const num2Len = (num2.toString().split('.')[1] ).length;
  const maxLen = Math.pow(10, Math.max(num1Len, num2Len));
  const res = ((num1 * maxLen) + (num2 * maxLen)) / maxLen
  console.log(maxLen,res);
}


console.log(0.2+0.1)               // 0.30000000000000004
add(0.2,0.1)                       // 10   0.3
//相当于 ((0.2*10) + (0.1*10))/10


console.log(2.67+1.3)              // 3.9699999999999998
add(2.67,1.3)                      // 100  3.97
//相当于 ((2.67*100) + (1.3*100))/100

console.log(2.217+1.3)             // 3.5170000000000003
add(2.217,1.3)                     // 1000 3.517
//相当于 ((2.217*1000) + (1.3*1000))/1000