• Vue或JS的浮点型乘除法无法精确计算


    最近做购物车时,遇到了浮点型乘除法无法精确计算,涉及到产品价格的计算,经常会出现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

  • 相关阅读:
    PAT天梯赛练习 L3-004 肿瘤诊断 (30分) 三维BFS
    PAT天梯赛练习 L3-003 社交集群 (30分) DFS搜索
    HDU6375双端队列
    hdu1801 01翻转 贪心
    hdu1677 贪心
    hdu2126 类01背包(三维数组的二维空间优化)
    HLOJ1361 Walking on the Grid II 矩阵快速幂
    HLOJ1366 Candy Box 动态规划(0-1背包改)
    IDEA,与gradle引入jar包报错
    StarUML激活
  • 原文地址:https://www.cnblogs.com/bushui/p/12150947.html
Copyright © 2020-2023  润新知