最近做购物车时,遇到了浮点型乘除法无法精确计算,涉及到产品价格的计算,经常会出现JS浮点数精度问题,这个问题,对于财务管理系统的开发者来说,是个非常严重的问题(涉及到钱相关的问题都是严重的问题),这里把相关的原因和问题的解决方案整理一下,也希望给各位提供一些参考。
一. 常见例子
// 加法 0.1 + 0.2 = 0.30000000000000004 0.1 + 0.7 = 0.7999999999999999 0.2 + 0.4 = 0.6000000000000001 // 减法 0.3 - 0.2 = 0.09999999999999998 1.5 - 1.2 = 0.30000000000000004 // 乘法 0.8 * 3 = 2.4000000000000004 19.9 * 100 = 1989.9999999999998 // 除法 0.3 / 0.1 = 2.9999999999999996 0.69 / 10 = 0.06899999999999999 // 比较 0.1 + 0.2 === 0.3 // false (0.3 - 0.2) === (0.2 - 0.1) // false
二. 导致原因
下面我们来说一下浮点数运算产生误差的原因:(拿0.1+0.2=0.30000000000000004进行举例)
首先,我们要站在计算机的角度思考 0.1 + 0.2 这个看似小儿科的问题。我们知道,能被计算机读懂的是二进制,而不是十进制,所以我们先把 0.1 和 0.2 转换成二进制看看:
0.1 => 0.0001 1001 1001 1001…(无限循环)
0.2 => 0.0011 0011 0011 0011…(无限循环)
上面我们发现0.1和0.2转化为二进制之后,变成了一个无限循环的数字,这在现实生活中,无限循环我们可以理解,但计算机是不允许无限循环的,对于无限循环的小数,计算机会进行舍入处理。进行双精度浮点数的小数部分最多支持 52 位,所以两者相加之后得到这么一串 0.0100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 ,因浮点数小数位的限制而截断的二进制数字,这时候,我们再把它转换为十进制,就成了0.30000000000000004
三. 解决方法
Vue浮点型乘法:
Vue.prototype.NumberMul = function(arg1, arg2) { var m = 0; var s1 = arg1.toString(); var s2 = arg2.toString(); try { m += s1.split(".")[1].length; } catch (e) {} try { m += s2.split(".")[1].length; } catch (e) {} return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m); }
Vue浮点型加法:
Vue.prototype.NumberAdd = function(arg1, arg2) { var r1, r2, m, n; try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 } try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 } m = Math.pow(10, Math.max(r1, r2)) n = (r1 >= r2) ? r1 : r2; return ((arg1 * m + arg2 * m) / m).toFixed(n); }
Vue浮点型减法:
Vue.prototype.NumberSub = function(arg1, arg2) { var re1, re2, m, n; try { re1 = arg1.toString().split(".")[1].length; } catch (e) { re1 = 0; } try { re2 = arg2.toString().split(".")[1].length; } catch (e) { re2 = 0; } m = Math.pow(10, Math.max(re1, re2)); n = (re1 >= re2) ? re1 : re2; return ((arg1 * m - arg2 * m) / m).toFixed(n); }
Vue浮点型除法:
// 除数,被除数, 保留的小数点后的位数 Vue.prototype.NumberDiv = function (arg1,arg2,digit){ var t1=0,t2=0,r1,r2; try{t1=arg1.toString().split(".")[1].length}catch(e){} try{t2=arg2.toString().split(".")[1].length}catch(e){} r1=Number(arg1.toString().replace(".","")) r2=Number(arg2.toString().replace(".","")) //获取小数点后的计算值 var result= ((r1/r2)*Math.pow(10,t2-t1)).toString() var result2=result.split(".")[1]; result2=result2.substring(0,digit>result2.length?result2.length:digit); return Number(result.split(".")[0]+"."+result2); }
使用的话也很简单(乘法计算)
{{NumberMul(0.0058,100)}}
如果是JS的话,也可以这样使用:
var NumberMul = function(arg1, arg2) { var m = 0; var s1 = arg1.toString(); var s2 = arg2.toString(); try { m += s1.split(".")[1].length; } catch (e) {} try { m += s2.split(".")[1].length; } catch (e) {} return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m); }
原文链接:https://blog.csdn.net/m0_37948170/article/details/88237208