一文解决前端JS小数运算精度问题

2024-03-01 0 222
目录
  • 前言
  • JS存在精度问题
  • 解决方案

前言

在做项目的时候,前端需要在表格的底部做一个汇总的功能,在采用reduce对当前属性所有值汇总时,发现汇总结果存在好长的小数位,本以为后端的数据就存在精度这么小的数据,后来,检查发现后端精度只有三位小数,但前端计算结果为什么会这样呢?

JS存在精度问题

在控制台可以试一下
0.1 + 0.2 的结果是0.30000000000000004
js的运算下 0.1 + 0.2 != 0.3

由于计算机在存储和计算数字的时候,使用的是二进制形式,有些十进制数据再转换成二进制时,无法精确表示。

JS在数字运算的时候,当存在浮点数的运算时,就有可能会出现精度误差,有些小数无法用二进制精确表示。

JavaScript采用的是双精度(64位)浮点运算规则,遵循的是IEEE二进制浮点数算法标准。其中有1位用作符号位,11位为阶码,尾数有52位。有兴趣详细了解的可以查阅相关资料。

比如
十进制0.1 -> 二进制表示为0.0001 1001 1001 1001…(1100循环)
十进制0.2 -> 二进制表示为0.0011 0011 0011 0011…(0011循环)
EEE 754 标准的 64 位双精度浮点数的小数部分最多支持53位二进制位,所以两者相加之后得到二进制为:
0.1 + 0.2 =
0.0100110011001100110011001100110011001100110011001100
因浮点数小数位的限制而截断的二进制数字,再转换为十进制,就成了0.30000000000000004。

解决方案

思路:

  • 将小数转化成整数进行计算,规避浮点数运算问题。
  • 整数的加减乘运算结果不会出现浮点数,不会存在精度问题,但除法会出现浮点数,因此用toFixed()方法截掉无效的小数位。
  • 将string转回number输出

/** 封装一个公共方法numberCalculate() 用于浮点数运算 */
//num1 num2传入两个值 symbol +-*/符号
numberCalculate(num1: number, num2: number, symbol: string) {
var str1 = num1.toString(), str2 = num2.toString(), result, str1Length, str2Length
try {
//获取小数点后的精度
str1Length = str1.split(\’.\’)[1].length
}
catch (error) {
//解决整数没有小数点方法
str1Length = 0
}
try {
str2Length = str2.split(\’.\’)[1].length
} catch (error) {
str2Length = 0
}
// 取两个数的最小精度,即小数点后数字的最大长度
var maxLen = Math.max(str1Length, str2Length)
// step将两个数都转化为整数至少小数点后移多少位
var step = Math.pow(10, maxLen)

switch (symbol) {
case \”+\”:
// toFixed()根据最小精度截取运算结果
result = ((num1 * step + num2 * step) / step).toFixed(maxLen)
break;
case \”-\”:
result = ((num1 * step – num2 * step) / step).toFixed(maxLen)
break;
case \”*\”:
result = (((num1 * step) * (num2 * step)) / step / step).toFixed(maxLen)
break;
case \”/\”:
result = ((num1 * step) / (num2 * step)).toFixed(maxLen)
break;
default:
break;
}
// 由于toFixed方法返回结果是字符串,还需要转回number输出
return Number(result)
}

0.1 + 0.2的计算,就可以调用numberCalculate(0.1,0.2,'+')进行计算了。

以上就是一文解决前端JS小数运算精度问题的详细内容,更多关于JS小数运算精度的资料请关注悠久资源网其它相关文章!

您可能感兴趣的文章:

  • js运算精度丢失的2个解决方法
  • 详解JavaScript 浮点数运算的精度问题
  • JavaScript浮点数及运算精度调整详解
  • Javascript 浮点运算精度问题分析与解决
  • javascript中的float运算精度实例分析

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript 一文解决前端JS小数运算精度问题 https://www.u-9.cn/biancheng/javascript/182463.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务