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 中使用频率仅次于组件，其包含 bind 、 inserted 、 update 、 componentUpdated 、 unbind 五个生命周期钩子，接下来通过本文给大家详细介绍Vue指令工作原理实现方法，需要的朋友参考下吧2021-06-06
ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法， 在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了，这篇文章主要介绍了VUE中$refs的基本用法,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue组件打包并发布到npm的全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue3+ts+echarts实现按需引入和类型界定方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
今天小编就为大家分享一篇vue.js项目 el-input 组件 监听回车键实现搜索功能示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了bing Map 在vue项目中的使用,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了浅谈Vue数据响应，Vue的数据响应主要是依赖了Object.defineProperty()，下面就具体来介绍一下如何实现数据响应2018-11-11
这篇文章主要介绍了rollup打包vue组件并发布到npm,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
这篇文章主要给大家介绍了关于如何利用Vue3+Vite批量导入模块/资源的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
今天小编就为大家分享一篇关于在vue项目中引入highcharts图表的方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
最新评论