js 后端返回浮点数，前端用乘法或者除法处理，得到超常值

Posted 2023-04-15

参考技术A 项目：后端返回 0.28 和 0.14，前端要求显示百分比
  =》  0.28*100 + “%”  =》28.99999999999... %

这里是js的精度丢失，（js小数转二进制时丢失）具体自己查

解决方案：return  parseFloat((val*100).toPrecision(12)) + "%";  

js 浮点运算bug

js几个浮点运算的bug，比如6.9-1.1，7*0.8，2.1/0.3，2.2+2.1

实现思路

通过将浮点数放大倍数到整型(最后再除以相应倍数)，再进行运算操作，这样就能得到正确的结果了

比如：11*(22.9*10)/10

 1 <script>    
 2             //除法函数，用来得到精确的除法结果 
 3             //说明：javascript的除法结果会有误差，在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。 
 4             //调用：2.1.div(0.3)     等于2.1 / 0.3 
 5             //返回值：this除以arg的精确结果
 6             //给Number类型增加一个div方法，调用起来更加方便。 
 7             Number.prototype.div = function(arg) {
 8                 var t1 = 0,
 9                     t2 = 0,
10                     r1, r2;
11                 try { t1 = this.toString().split(".")[1].length } catch(e) {}
12                 try { t2 = arg.toString().split(".")[1].length } catch(e) {}
13                 with(Math) {
14                     r1 = Number(this.toString().replace(".", ""))
15                     r2 = Number(arg.toString().replace(".", ""))
16                     return(r1 / r2) * pow(10, t2 - t1);
17                 }
18             }
19             //乘法函数，用来得到精确的乘法结果 
20             //说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。 
21             //调用：7.0.mul(0.8)  等于7*0.8
22             //返回值：this乘以arg的精确结果 
23             //给Number类型增加一个mul方法，调用起来更加方便。 
24             Number.prototype.mul = function(arg) {
25                 var m = 0,
26                     s1 = this.toString(),
27                     s2 = arg.toString();
28                 try { m += s1.split(".")[1].length } catch(e) {}
29                 try { m += s2.split(".")[1].length } catch(e) {}
30                 return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
31             }
32             //加法函数，用来得到精确的加法结果 
33             //说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 
34             //调用： 2.2.add(2.1) 等于 2.2+2.1
35             //返回值：this加上arg的精确结果 
36             //给Number类型增加一个add方法，调用起来更加方便。 
37             Number.prototype.add = function(arg) {
38                 var r1, r2, m;
39                 try { r1 = this.toString().split(".")[1].length } catch(e) { r1 = 0 }
40                 try { r2 = arg.toString().split(".")[1].length } catch(e) { r2 = 0 }
41                 m = Math.pow(10, Math.max(r1, r2))
42                 return(this * m + arg * m) / m    
43             }
44             //减法函数，用来得到精确的减法结果 
45             //说明：javascript的减法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的减法结果。 
46             //调用：6.9.subtr(1.1) 等于     6.9 - 1.1
47             //返回值：this减去arg的精确结果 
48             //给Number类型增加一个subtr 方法，调用起来更加方便。 
49             Number.prototype.subtr = function(arg) {
50                 var r1, r2, m, n;
51                 try { r1 = this.toString().split(".")[1].length } catch(e) { r1 = 0 }
52                 try { r2 = arg.toString().split(".")[1].length } catch(e) { r2 = 0 }
53                 m = Math.pow(10, Math.max(r1, r2));
54                 //动态控制精度长度
55                 n = (r1 >= r2) ? r1 : r2;
56                 return((this * m - arg * m) / m).toFixed(n);
57             }    
58             console.log("6.9 - 1.1："+(6.9 - 1.1).toString());
59             console.log("6.9.subtr(1.1)："+6.9.subtr(1.1));
60             console.log("7*0.8："+(7*0.8).toString());
61             console.log("7.0.mul(0.8)："+7.0.mul(0.8).toString());
62             console.log("2.1/0.3："+(2.1/0.3));
63             console.log("2.1.div(0.3)："+2.1.div(0.3));
64             console.log("2.2+2.1："+(2.2+2.1).toString());
65             console.log("2.2.add(2.1)："+2.2.add(2.1));
66             //通过将浮点数放大倍数到整型(最后再除以相应倍数)，再进行运算操作，这样就能得到正确的结果了
67             console.log(11*(22.9*10)/10);
68         </script>
69