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
最后就是使用第三方庫(kù)：例如 decimal.js、big.js 等第三方庫(kù)可以提供更高精度的浮點(diǎn)數(shù)運(yùn)算。
附：Vue處理超過16位數(shù)字精度丟失問題（數(shù)字最后兩位變0）
現(xiàn)象：
當(dāng)我們使用MyBatis-Plus 使用 ASSIGN_ID(雪花算法) 生成的id作為主鍵時(shí)，因?yàn)槠溟L(zhǎng)度為19位，而前端一般能處理16位，如果不處理的話在前端會(huì)造成精度丟失，最后兩位會(huì)變成00，感覺像是四舍五入后的效果，如下：
1648981853080055810 => 1648981853080055800
后端處理
@JsonSerialize(using = ToStringSerializer.class) @TableId(type = IdType.ASSIGN_ID) private Long id;
前端處理
前端一般都是用axios進(jìn)行數(shù)據(jù)請(qǐng)求，我們通過引入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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue 級(jí)聯(lián)下拉框的設(shè)計(jì)與實(shí)現(xiàn)
在前端開發(fā)中，級(jí)聯(lián)選擇框是經(jīng)常用到的，這樣不僅可以增加用戶輸入的友好性，還能減少前后端交互的數(shù)據(jù)量。本文就介紹一下使用Vue實(shí)現(xiàn)級(jí)聯(lián)下拉框，感興趣的可以了解一下2021-07-07
Vue3中如何使用v-model高級(jí)用法參數(shù)綁定傳值
本文給大家介紹Vue3中使用v-model高級(jí)用法參數(shù)綁定傳值的相關(guān)知識(shí),包括單個(gè)輸入框傳值和多個(gè)輸入框傳值,一個(gè)組件接受多個(gè)v-model值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
這篇文章主要介紹了Vue 2.0 基礎(chǔ)，具體內(nèi)容有、基本語(yǔ)法、生命周期、路由管理Vue-Router、狀態(tài)管理Vuex、Http請(qǐng)求庫(kù)Axios，想詳細(xì)了解的小伙伴請(qǐng)和現(xiàn)編一起學(xué)習(xí)下面文章內(nèi)容吧2021-10-10
如何使用Vue mapState快捷獲取Vuex state多個(gè)值
這篇文章主要為大家介紹了如何使用Vue mapState快捷獲取Vuex state多個(gè)值實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
本篇文章主要介紹了vue.js 獲取當(dāng)前自定義屬性值，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
本文主要介紹了vue 防止多次點(diǎn)擊，可以有效防止惡意點(diǎn)擊，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Vue框架里使用Swiper的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue項(xiàng)目依賴檢查depcheck問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue中g(shù)et和post請(qǐng)求的區(qū)別點(diǎn)總結(jié)
在本篇文章里小編給大家分享的是一篇關(guān)于vue中g(shù)et和post請(qǐng)求的區(qū)別點(diǎn)總結(jié)內(nèi)容，對(duì)此有興趣的朋友們可以跟著學(xué)習(xí)下。2021-12-12
Vue3從0搭建Monorepo項(xiàng)目組件庫(kù)
這篇文章主要為大家介紹了Vue3從0搭建Monorepo項(xiàng)目組件庫(kù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02