js中有关小数点失精问题

最新推荐文章于 2022-08-09 16:05:04 发布

H-L

最新推荐文章于 2022-08-09 16:05:04 发布

阅读量1.3k

点赞数 1

分类专栏：前端

原文链接：https://blog.csdn.net/qq_28073073/article/details/89847046

版权

前端专栏收录该内容

49 篇文章 1 订阅

订阅专栏

本文讨论了JavaScript中浮点数计算导致的小数点精度丢失问题，例如0.55*100得到55.00000000000001。这是由于JavaScript遵循IEEE 754标准造成的。为了解决这个问题，提出了多种解决方案，包括使用toFixed方法、Math.round以及转换为整数运算等。在Vue应用中，可以通过自定义过滤器或计算属性来修正显示的百分比值。

摘要由CSDN通过智能技术生成

今天用vue做小数点转换百分比的时候遇到：0.55*100 = 55.00000000000001，起初以为是vue计算方式有问题，后来想到js有小数点失精的问题，结果测试了一下果然是这个问题：

js失精算法

console.log(0.1+0.2); // 0.30000000000000004

console.log(0.07*100); // 7.000000000000001

console.log(0.119*100); // 11.899999999999999

......

结果为什么会这样？

查了下资料，其实JavsScript中，变量在存储时并不区分number和float类型，而是统一按float存储。而javascript使用IEEE 754-2008 标准定义的64bit浮点格式存储number，按照IEEE 754的定义： http://en.wikipedia.org/wiki/IEEE_754-2008 decimal64对应的整形部分长度为10,小数部分长度为16，所以默认的计算结果为“55.00000000000001”，如最后一个小数为0，则取1作为有效数字标志。类似地，可以想像，1/3的结果应该是0.3333333333333333。

那么如果校正这个值呢？解决的思路有：

1.parseInt，parseFloat

大多数情况下不需要小数点后很多位，可以使用toFixed(n)方法修正后（n是小数后精确的位数）。

console.log(0.119*100); // 11.899999999999999

parseFloat((0.119*100).toFixed(10)); // 11.9

2.计算出小数点后位数的大的一个，乘法消去小数点做整数运算后做除法

Math.round(arg1 * m - arg2 * m) / m

Math.round(( 0.119 *100)*1000)/1000; // 11.9

还可以用位运算符、转化为字符串处理（Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)）、第三方插件库（big.js,bignumber.js，decimal.js等等）等方式进行处理。

既然找到解决方式，在Vue中使用就可

<td>{{data | getPercentage}}%</td>

1.Vue.filter("getPercentage", function(value) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 return Math.round((value * 100)*1000)/1000;

});

2.computed:{ getPercentage:function () { return data* 100 } }