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