前端JavaScript處理小數精度問題的最佳實踐教程
更新時間：2024年10月22日 08:29:30 作者：零凌林
在JavaScript開發(fā)過程中,小數精度問題是一個常見的難題,本文介紹了兩種解決小數精度問題的方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
前言：
針對于小數精度問題，本次我們主要推薦兩種方式，一種是簡單的函數封裝，一種是使用第三方庫big.js。
方法一：
自封裝函數搭配parseFloat和toFixed解決小數精度問題，僅適用于解決一般性小數精度問題，適用于項目中小數問題比較少的項目。
/**
* @description: 處理小數精度
* @param {*} value 需要格式化的數字
* @param {*} fixedNum 保留的小數位數，默認為2
* @param {*} multiple 乘數，默認為1
* @return {*}
*/
export const handleDecimalPrecision = (value, fixedNum = 2, multiple = 1) => {
return parseFloat((value * multiple).toFixed(fixedNum))
}
測試用例：
（傳倍數multiple 是為了展示成百分比，比如30%）
0.1 + 0.2 //0.30000000000000004 handleDecimalPrecision(0.1 + 0.2) //0.3 handleDecimalPrecision(0.1 + 0.2,1,100) //30 傳倍數multiple 是為了展示成百分比，比如30%
方法二：
使用第三方庫big.js 。適用于精度問題比較多的項目，長期性解決精度問題。以下我們將展示一些常見的使用范圍的場景，其他的深冷需求可移步至官方文檔查看。
big.js特點
- 簡單的API
- 比Java的BigDecimal更快、更小、更易于使用
- 復制JavaScript數字的toExponential、toFixed和toPrecision方法
- 可以訪問的十進制浮點格式存儲值
- 全面的文檔和測試集
- 沒有依賴關系，相對獨立
- 僅使用ECMAScript 3，無兼容性問題
安裝big.js
npm install big.js -S
引入big.js
<script> import Big from 'big.js' </script>
示例（以vue為例）：
code:
<template>
<div class="app-container">
<div>小數精度</div>
<div>未處理 : 0.1 + 0.2 = {{sum_orgin}}</div>
<div>bigjs處理 : 0.1 + 0.2 = {{sum_bigjs}}</div>
</div>
</template>
<script setup>
import Big from 'big.js'
const num1 = 0.1
const num2 = 0.2
const sum_orgin = num1.value + num2.value
const sum_bigjs = Big(num1.value).plus(Big(num2.value))
</script>效果圖：
創(chuàng)建Big number數據
const num1 = Big(0.1) 或者 const num2 = new Big(0.2)
加法精度問題處理 - plus
0.1 + 0.2 //0.30000000000000004 0.7 + 0.1 //0.7999999999999999 0.2 + 0.4 //0.6000000000000001 Big(0.1).plus(Big(0.2)) //0.3 Big(0.1).plus(Big(0.24)) //0.34
減法精度問題 - minus
0.3 - 0.2 //0.09999999999999998 1.5 - 1.2 //0.30000000000000004 Big(0.3).minus(Big(0.2)) //0.1
乘法精度問題 - times
19.9 * 100 //1989.9999999999998 0.8 * 3 //2.4000000000000004 35.41 * 100 //3540.9999999999995 Big(19.9).times(Big(100)) //1990
除法精度問題 - div
0.3 / 0.1 //2.9999999999999996 0.69 / 10 //0.06899999999999999 Big(0.3).div(Big(0.1)) //3
保留小數位數(四舍五入) - round
1 / 3 //0.3333333333333333 Big(1).div(Big(3)).round(3) //0.333
big.js運算符說明
運算符 | 說明 |
abs | 取絕對值 |
cmp | compare的縮寫，即比較函數 |
div | 除法 |
eq | equal的縮寫，即相等比較 |
gt | 大于 |
gte | 小于等于，e表示equal |
lt | 小于 |
lte | 小于等于，e表示equal |
minus | 減法 |
mod | 取余 |
plus | 加法 |
pow | 次方 |
prec | 按精度舍入，參數表示整體位數 |
round | 按精度舍入，參數表示小數點后位數 |
sqrt | 開方 |
times | 乘法 |
toExponential | 轉化為科學計數法，參數代表精度位數 |
toFied | 補全位數，參數代表小數點后位數 |
toJSON/toString | 轉化為字符串 |
toPrecision | 按指定有效位數展示，參數為有效位數 |
toNumber | 轉化為JavaScript中number類型 |
valueOf | 包含負號（如果為負數或者-0）的字符串 |
總結
到此這篇關于前端JavaScript處理小數精度問題的文章就介紹到這了,更多相關前端JS處理小數精度內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了JS判斷是否長按某一鍵的方法,涉及JavaScript針對鍵盤按鍵的判斷及響應操作技巧,需要的朋友可以參考下2016-03-03
本篇文章主要是對js與jquery獲取父元素,刪除子元素的兩種不同方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了JavaScript獲取頁面元素的常用方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
JavaScript允許你改變站點的CSS表示層。如果想把用戶的眼球吸引到那些你希望他們關注的頁面元素上，改變樣式是極佳的（也是很普遍的）方式。2008-10-10
詳解BootStrap中Affix控件的使用及保持布局的美觀的方法
Affix是BootStrap中的一個很有用的控件，他能夠監(jiān)視瀏覽器的滾動條的位置并讓你的導航始終都在頁面的可視區(qū)域。本文重點給大家介紹BootStrap中Affix控件的使用及保持布局的美觀的方法，感興趣的朋友一起看看吧2016-07-07
這篇文章主要介紹了javascript數組遍歷的方法,結合實例形式分析了javascript數組遍歷及相關的some、every、filter、map等方法的使用技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了微信小程序canvas截取任意形狀的實現代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
這篇文章主要以實例方式向大家講解了js驗證表單項是否為空的方法，感興趣的朋友可以參考一下2016-01-01
JavaScript數組扁平轉樹形結構數據(Tree)的實現
本文主要介紹了JavaScript數組扁平轉樹形結構數據(Tree)的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了webpack常用構建優(yōu)化策略小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11