Vue數(shù)字相加、相減精度丟失處理3種方法
更新時間：2023年08月28日 09:31:04 作者：CV章魚燒
這篇文章主要給大家介紹了關于Vue數(shù)字相加、相減精度丟失處理3種方法的相關資料,前端在操作加減乘除計算時,經常會出現(xiàn)精度缺失問題,有時會顯示為科學計數(shù)的樣式,需要的朋友可以參考下
方法 一：
// num 是數(shù)值，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方法 二：
//可以傳你要的小數(shù)幾位 let num = 2 const a = 0.1; const b = 0.2; console.log((a+b).toFixed(num)); // 0.30
方法 三：
擴大運算范圍：將浮點數(shù)轉化為整數(shù)，相乘或相加后再除回去，可以避免小數(shù)位精度的影響。
let num1 = 0.1; let num2 = 0.2; let sum = (num1 * 10 + num2 * 10) / 10; console.log(sum); // 0.3
最后就是使用第三方庫：例如 decimal.js、big.js 等第三方庫可以提供更高精度的浮點數(shù)運算。
附：Vue處理超過16位數(shù)字精度丟失問題（數(shù)字最后兩位變0）
現(xiàn)象：
當我們使用MyBatis-Plus 使用 ASSIGN_ID(雪花算法) 生成的id作為主鍵時，因為其長度為19位，而前端一般能處理16位，如果不處理的話在前端會造成精度丟失，最后兩位會變成00，感覺像是四舍五入后的效果，如下：
1648981853080055810 => 1648981853080055800
后端處理
@JsonSerialize(using = ToStringSerializer.class) @TableId(type = IdType.ASSIGN_ID) private Long id;
前端處理
前端一般都是用axios進行數(shù)據請求，我們通過引入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數(shù)字相加、相減精度丟失處理3種方法的文章就介紹到這了,更多相關Vue數(shù)字相加相減精度丟失內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue 表單驗證按鈕事件交由父組件觸發(fā)的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
下面小編就為大家分享一篇Vue的elementUI實現(xiàn)自定義主題方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家分享的是vue項目實現(xiàn)頁面跳轉的方法，vue-router是前端開發(fā)中用來實現(xiàn)路由頁面跳轉的一個模塊。下面小編將帶來如何在已經創(chuàng)建好的vue-router項目基礎下實現(xiàn)頁面跳轉,需要的朋友可以參考一下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 量身打造的表單校驗框架，允許您校驗輸入的內容并顯示對應的錯誤提示信息。這篇文章給大家?guī)砹薞ue.js 使用 Vee-validate 實現(xiàn)表單校驗的相關知識，感興趣的朋友一起看看吧2019-04-04
這篇文章主要給大家介紹了關于vite基本常見配置講解的相關資料,最近做項目要求將webpack打包方式換成vite,下面將詳細講解一下配置vite需要改動的東西,需要的朋友可以參考下2023-11-11
在Vue3項目中,通常會有以下一些常見的目錄和文件,下面這篇文章主要給大家介紹了關于vue3項目中各個文件的作用,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vue插件之滑動驗證碼用法,結合實例形式詳細分析了Vue滑動驗證碼插件相關使用方法與操作注意事項,需要的朋友可以參考下2020-04-04
nextTick是Vue提供的一個全局API，由于Vue的異步更新策略導致我們對數(shù)據的修改不會立刻體現(xiàn)，在DOM變化上，此時如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個方法，這篇文章主要介紹了解析VUE中nextTick,需要的朋友可以參考下2022-11-11