Vue数字相加、相减精度丢失处理3种方法
作者：CV章鱼烧
这篇文章主要给大家介绍了关于Vue数字相加、相减精度丢失处理3种方法的相关资料,前端在操作加减乘除计算时,经常会出现精度缺失问题,有时会显示为科学计数的样式,需要的朋友可以参考下
方法 一：
// num 是数值，decimals是精度几位
function round(num, decimals) {
const factor = Math.pow(10, decimals);
return Math.round(num * factor) / factor;
}
const a = 0.1;
const b = 0.2;
console.log(round(a + b, 1)); // 0.3方法 二：
//可以传你要的小数几位 let num = 2 const a = 0.1; const b = 0.2; console.log((a+b).toFixed(num)); // 0.30
方法 三：
扩大运算范围：将浮点数转化为整数，相乘或相加后再除回去，可以避免小数位精度的影响。
let num1 = 0.1; let num2 = 0.2; let sum = (num1 * 10 + num2 * 10) / 10; console.log(sum); // 0.3
最后就是使用第三方库：例如 decimal.js、big.js 等第三方库可以提供更高精度的浮点数运算。
附：Vue处理超过16位数字精度丢失问题（数字最后两位变0）
现象：
当我们使用MyBatis-Plus 使用 ASSIGN_ID(雪花算法) 生成的id作为主键时，因为其长度为19位，而前端一般能处理16位，如果不处理的话在前端会造成精度丢失，最后两位会变成00，感觉像是四舍五入后的效果，如下：
1648981853080055810 => 1648981853080055800
后端处理
@JsonSerialize(using = ToStringSerializer.class) @TableId(type = IdType.ASSIGN_ID) private Long id;
前端处理
前端一般都是用axios进行数据请求，我们通过引入json-bigint来解决：
// 安装依赖
npm install json-bigint
// 使用
import JSONBIG from 'json-bigint'
axios.defaults.transformResponse = [
function (data) {
const json = JSONBIG({
storeAsString: true
})
const res = json.parse(data)
return res
}
]总结
到此这篇关于Vue数字相加、相减精度丢失处理3种方法的文章就介绍到这了,更多相关Vue数字相加相减精度丢失内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！