Vue数字相加、相减精度丢失处理3种方法
更新时间：2023年08月28日 09:31:04 作者：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数字相加相减精度丢失内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue 表单验证按钮事件交由父组件触发的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
下面小编就为大家分享一篇Vue的elementUI实现自定义主题方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要给大家分享的是vue项目实现页面跳转的方法，vue-router是前端开发中用来实现路由页面跳转的一个模块。下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转,需要的朋友可以参考一下2021-11-11
本文主要介绍了vue3.0中使用element UI表单遍历校验问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了vue3之向echarts组件传值的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架，允许您校验输入的内容并显示对应的错误提示信息。这篇文章给大家带来了Vue.js 使用 Vee-validate 实现表单校验的相关知识，感兴趣的朋友一起看看吧2019-04-04
这篇文章主要给大家介绍了关于vite基本常见配置讲解的相关资料,最近做项目要求将webpack打包方式换成vite,下面将详细讲解一下配置vite需要改动的东西,需要的朋友可以参考下2023-11-11
在Vue3项目中,通常会有以下一些常见的目录和文件,下面这篇文章主要给大家介绍了关于vue3项目中各个文件的作用,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了Vue插件之滑动验证码用法,结合实例形式详细分析了Vue滑动验证码插件相关使用方法与操作注意事项,需要的朋友可以参考下2020-04-04
nextTick是Vue提供的一个全局API，由于Vue的异步更新策略导致我们对数据的修改不会立刻体现，在DOM变化上，此时如果想要立即获取更新后的DOM状态，就需要使用这个方法，这篇文章主要介绍了解析VUE中nextTick,需要的朋友可以参考下2022-11-11
最新评论