js运算精度丢失的2个解决方法

更新时间：2023年06月08日 15:13:24 作者：AJiu~~

近期在做项目的时候,遇到了一些JS浮点数精度的问题,这个问题其实说大不大,说小不小,下面这篇文章主要给大家介绍了关于js运算精度丢失的2个解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

问题所在：

 res.orderColorDeliveryRecords.forEach((item) => {
                        //计算金额
                        item.money = (item.price * item.amount);
                        if(!item.cusTypeName){
                            item.cusTypeName = 'N/A';
                        }
                        this.record.money += parseFloat(item.money);
                    });

界面显示：

解决方法1（低精度）：

在运算结果的后面加上toFixed()，精度要求不高的情况下使用;

toFixed介绍：

用法： number.toFixed( value )

参数：此函数参数列表有一个参数，他表示小数点后面精确的位数。

返回值：他以字符串表示形式返回一个数字。

代码实现：

res.orderColorDeliveryRecords.forEach((item) => {
    item.money = this.actionOperationResult(item.price , item.amount);
    if(!item.cusTypeName){
        item.cusTypeName = 'N/A';
    }
    this.record.money += parseFloat(item.money);
});

界面显示：

小结：

该解决方法只适用于低精度运算。并且有弊端，就如上图界面显示一样，最终运算结果是没有小数位的，还是将小数位给显示出来的。如果不在乎这些还是可以使用的。

解决方法2（高精度）：

先将运算值 x 10^n 转换成整数进行运算，最后将结果还原。精度要求高的推荐使用该解决方法。（代码实现只实现了乘法，需要其他运算的可以自行更改一下）

代码实现:

actionOperationResult(val1, val2){
    const p = this.actionOperation(val1, val2);
    return ((val1 * p) * (val2 * p)) / (p * p);
},
actionOperation(val1, val2){
    const len1 = val1.toString().length - val1.toString().indexOf(".") - 1;
    const len2 = val2.toString().length - val2.toString().indexOf(".") - 1;
    const p = Math.max(len1, len2);
    // 避免最终求出结果的长度大于最大长度的时候导致精度丢失 开启下面
    // p += p - Math.min(len1, len2); 
    return  Math.pow(10, p);
}

测试1：

item.money = this.actionOperationResult(item.price , item.amount);

界面显示：

测试2：

const test  = this.actionOperationResult(123.456789435252 , 42.697894);
const test1  = this.actionOperationResult(4342.57897 , 64789.337489);
const test2  = this.actionOperationResult(78.7897398 , 67.768978943);
console.log("test:",test);
console.log("test1:",test1);
console.log("test2:",test2);

输出结果：

小结：

该解决方法适用于高精度运算，既解决了精度丢失问题，又解决了我想要的最终结果是整数不显示小数位的问题。如果要求高精度请选择该解决方案。

到此这篇关于js运算精度丢失的2个解决方法的文章就介绍到这了,更多相关js运算精度丢失内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript实现table切换的插件封装
这篇文章主要为大家详细介绍了JavaScript实现table切换的插件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
js加减乘除精度丢失问题解决
计算机的二进制实现和位数限制有些数无法有限表示，就会产生精度丢失问题，本文主要介绍了js加减乘除精度丢失问题解决,具有一定的参考价值，感兴趣的可以了解一下
2023-09-09
参考：关于Javascript中实现暂停的几篇文章
参考：关于Javascript中实现暂停的几篇文章...
2007-03-03
利用d3.js制作连线动画图与编辑器的方法实例
这篇文章主要给大家介绍了关于如何利用d3.js制作连线动画图与编辑器的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用d3.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-09-09
JSON.parse()和JSON.stringify()使用介绍
这篇文章主要介绍了JSON.parse()和JSON.stringify()使用,需要的朋友可以参考下
2014-06-06
两个JS之间的函数互相调用方式
这篇文章主要介绍了两个JS之间的函数互相调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
JS动态添加元素及绑定事件造成程序重复执行解决
这篇文章主要给大家介绍了关于JS动态添加元素及绑定事件造成程序重复执行的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-12-12
微信小程序利用for循环解决内容变更问题
这篇文章主要介绍了微信小程序利用for循环解决内容变更问题，本文分步骤通过实例代码详解给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-03-03
纯CSS3代码实现滑动开关效果
CSS33D炫酷左右滑动开关按钮是一款非常酷的CSS3 3D开关按钮，点击按钮可以左右滑动，就像开关打开闭合一样的效果，通过本篇文章给大家介绍纯CSS3代码实现滑动开关效果，需要的朋友可以参考下
2015-08-08
JS实现清除指定cookies的方法
这篇文章主要介绍了JS实现清除指定cookies的方法,在web程序设计中非常实用,需要的朋友可以参考下
2014-09-09