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实现级联下拉框，感兴趣的可以了解一下2021-07-07
本文给大家介绍Vue3中使用v-model高级用法参数绑定传值的相关知识,包括单个输入框传值和多个输入框传值,一个组件接受多个v-model值,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
这篇文章主要介绍了Vue 2.0 基础，具体内容有、基本语法、生命周期、路由管理Vue-Router、状态管理Vuex、Http请求库Axios，想详细了解的小伙伴请和现编一起学习下面文章内容吧2021-10-10
如何使用Vue mapState快捷获取Vuex state多个值
这篇文章主要为大家介绍了如何使用Vue mapState快捷获取Vuex state多个值实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
本篇文章主要介绍了vue.js 获取当前自定义属性值，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
本文主要介绍了vue 防止多次点击，可以有效防止恶意点击，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了Vue框架里使用Swiper的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue项目依赖检查depcheck问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
在本篇文章里小编给大家分享的是一篇关于vue中get和post请求的区别点总结内容，对此有兴趣的朋友们可以跟着学习下。2021-12-12
这篇文章主要为大家介绍了Vue3从0搭建Monorepo项目组件库示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
最新评论