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