element ui前端小数计算精度丢失的问题如何解决？
文章目录
- 前言
- 一、什么是精度丢失？
- 产生精度丢失的原因
- 如何避免或减少精度丢失的影响
- 二、实际项目开发实例举例
- 以项目预算模块为例
- 如何解决精度丢失
- 总结
前言
在《工程投标项目管理系统》项目开发中工程项目预算、成本管理、财务管理等模块的开发中不可避免的要和金融数字打交道，数字的计算 vue 总是出现精度丢失的困惑，解决这个问题其实很简单，有条件的同学可以自己封装函数，没有条件的同学懒人就用懒方法。小编虽懒，使用高人封装的decimal.js方法，爽的一逼，节约时间用于陪女朋友去喝咖啡何乐而不美🌹🤣🌹🤣🌹
一、什么是精度丢失？
- 在计算机中，小数是以二进制的形式存储的。有些十进制小数无法精确地转换为二进制小数，在进行数值计算时就会产生精度丢失的问题。例如，十进制的 0.1 在二进制中是一个无限循环小数。在计算机内存中，由于存储位数的限制，只能近似地表示这个数，这就导致了精度的损失。
当进行多个小数的运算，如加法、减法、乘法、除法等操作时，这种精度误差可能会累积，从而使最终结果与预期的数学精确结果产生偏差。
产生精度丢失的原因
1、二进制与十进制的转换问题
计算机底层是基于二进制进行数据存储和运算的。像十进制的分数1/3在十进制下是无限循环小数，同样，有些十进制小数在转换为二进制时也是无限循环小数。以为例，将其转换为二进制的计算过程如下：
- 0.1x2=0.2 整数部分为0;
- 0.2x2=0.4 整数部分为0;
- 0.4x2=0.8 整数部分为0;
- 0.8x2=1.6 整数部分为1;
- 0.6x2=1.2 整数部分为1;
以此类推，会发现转换为二进制是，是一个无限循环小数。计算机在存储时如果只能保留有限的位数，就会产生精度误差。
2、浮点数的存储格式限制
计算机中常用的浮点数（如单精度浮点数和双精度浮点数）有其特定的存储格式。以 IEEE 754 标准的单精度浮点数为例，它用 32 位来存储一个浮点数，其中包括 1 位符号位、8 位指数位和 23 位尾数位。这种有限的位数限制了能够精确表示的数值范围和精度。
例如，当两个非常接近的小数相减时，由于浮点数的精度限制，可能会得到不准确的结果。假设，，在理论上，但在计算机中由于精度问题，可能会得到一个略微偏离这个值的结果。
如何避免或减少精度丢失的影响
1、使用高精度计算库
对于一些对精度要求极高的计算场景，如金融计算等，可以使用高精度计算库。
2、适当的数值缩放
在一些情况下，可以通过适当的数值缩放来减少精度丢失的影响。例如，在处理货币金额时，如果金额单位是元，可以将其转换为分来进行计算。这样就可以使用整数进行计算，避免了小数计算带来的精度问题。
3、误差范围判断
对于一些不要求绝对精确，但要求在合理误差范围内的计算，可以设定一个允许的误差范围。
例如，当比较两个浮点数是否相等时，不直接使用a==b，而是判断|a-b|<e，其中e是一个很小的允许误差值,如 1e-9。
二、实际项目开发实例举例
以项目预算模块为例
项目的预算一般分为名称、规格、单价、数量，总价即为单价和数量相乘的鸡，别管什么丫，下面截图不难看出计算结果，无限接近实际值，近在咫尺永恒于咫尺，这就纳闷，(´･_･`) 会计看见就会懵圈，我单位的会计是个温顺优雅，肤色如水银的大美女，小编暗恋她多时了，不知用什么优雅的方式表白，心涌澎湃却又猥琐至极，其实真正懵圈的是我这个可怜而又孤独的猿人；
给你看看上图所对应我的屎坨代码，太喽了，搓的一比！
<el-table-column label="单价" prop="dePrice" width="180">
<template slot-scope="scope">
<el-form-item :prop="'oaBudgetDetailList.' + scope.$index + '.dePrice'" :rules="subRules.de_price" label-width="0">
<el-input v-model="scope.row.dePrice" placeholder="请输入单价" @input="handleMouseLeave"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="数量" prop="deNumber" width="180">
<template slot-scope="scope">
<el-form-item :prop="'oaBudgetDetailList.' + scope.$index + '.deNumber'" :rules="subRules.de_number" label-width="0">
<el-input v-model="scope.row.deNumber" placeholder="请输入数量" @input="handleMouseLeave"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="总价" width="180">
<template slot-scope="scope">
<div style="background-color: #cccccc;padding: 6px;">{{multiplyWithPrecision(Number(scope.row.dePrice), Number(scope.row.deNumber))}}</div>
</template>
</el-table-column>
鼠标移开后执行了方法：
/**计算两个数相乘**/
multiplyWithPrecision(num1, num2) {
const total = num1 * num2;
return Number(total);
}
你铁定没看懂吧，这也许是我多年找不到女朋友的最直接的原因，代码写的喽，女孩、女人、妇女、大妈、奶奶根本不看你一眼，我TM太难了🤦♂️，在爱情的云端，希望高人指点，早日摆脱单身狗，小编确实太寂寞，美好的渴望总是经常回味会计从身边走过的那股浓郁芳香的风，我愿随风潜入夜，却总润物细无声。
如何解决精度丢失
terminal 进入到 ruoyi-ui 根目录执行下面命令行：
npm install --save decimal.js
node_modules 目录就多一个文件：
引入
import Decimal from "decimal.js";
将计算方法改造如下：
/**计算两个数相乘**/
multiplyWithPrecision(num1, num2) {
return Decimal.mul(num1, num2).toNumber();
}
这个代码，你应该可以看得懂吧，看不懂你是装不懂吧。优雅到总算能在产品经理面前甩甩发型了，从来很少和小编说话的会计既然笑着竖起大拇指！没想到技术总监既然把项目中的财务管理模块的开发分给了小编，这可把小编乐坏了，终于有机会和会计对接业务了，我美了美了美了、我醉了醉了醉了，我爱编程不爱加班的历史颠覆了；🌹🌹🌹🌹🌹🌹🌹🌹🌹
最终项目既然开源了,小编为您呈上，支持下多多 star!您的支持是我源泉的动力。
开源地址：https://gitee.com/xnqysabout/ry-vue-flowable-xg
总结
解决前端小数计算精度丢失的问题，非常简单，Decimal库能有效解决此问题，它内部以高精度方式存储和处理数字，摒弃二进制浮点数弊端。加、减、乘、除等运算能精准得到期望结果。