快捷導(dǎo)航

一文解決前端JS小數(shù)運(yùn)算精度問題

更新時(shí)間：2024年02月21日 08:18:51 作者：Katrin

在做項(xiàng)目的時(shí)候,前端需要在表格的底部做一個(gè)匯總的功能,在采用reduce對當(dāng)前屬性所有值匯總時(shí),發(fā)現(xiàn)匯總結(jié)果存在好長的小數(shù)位,本文給大家介紹了如何解決前端JS小數(shù)運(yùn)算精度問題,需要的朋友可以參考下

前言

在做項(xiàng)目的時(shí)候，前端需要在表格的底部做一個(gè)匯總的功能，在采用reduce對當(dāng)前屬性所有值匯總時(shí)，發(fā)現(xiàn)匯總結(jié)果存在好長的小數(shù)位，本以為后端的數(shù)據(jù)就存在精度這么小的數(shù)據(jù)，后來，檢查發(fā)現(xiàn)后端精度只有三位小數(shù)，但前端計(jì)算結(jié)果為什么會這樣呢？

JS存在精度問題

在控制臺可以試一下
0.1 + 0.2 的結(jié)果是0.30000000000000004
js的運(yùn)算下 0.1 + 0.2 != 0.3

由于計(jì)算機(jī)在存儲和計(jì)算數(shù)字的時(shí)候，使用的是二進(jìn)制形式，有些十進(jìn)制數(shù)據(jù)再轉(zhuǎn)換成二進(jìn)制時(shí)，無法精確表示。

JS在數(shù)字運(yùn)算的時(shí)候，當(dāng)存在浮點(diǎn)數(shù)的運(yùn)算時(shí)，就有可能會出現(xiàn)精度誤差，有些小數(shù)無法用二進(jìn)制精確表示。

JavaScript采用的是雙精度(64位)浮點(diǎn)運(yùn)算規(guī)則，遵循的是IEEE二進(jìn)制浮點(diǎn)數(shù)算法標(biāo)準(zhǔn)。其中有1位用作符號位，11位為階碼，尾數(shù)有52位。有興趣詳細(xì)了解的可以查閱相關(guān)資料。

比如
十進(jìn)制0.1 -> 二進(jìn)制表示為0.0001 1001 1001 1001...(1100循環(huán))
十進(jìn)制0.2 -> 二進(jìn)制表示為0.0011 0011 0011 0011...(0011循環(huán))
EEE 754 標(biāo)準(zhǔn)的 64 位雙精度浮點(diǎn)數(shù)的小數(shù)部分最多支持53位二進(jìn)制位，所以兩者相加之后得到二進(jìn)制為：
0.1 + 0.2 = 
0.0100110011001100110011001100110011001100110011001100 
因浮點(diǎn)數(shù)小數(shù)位的限制而截?cái)嗟亩M(jìn)制數(shù)字，再轉(zhuǎn)換為十進(jìn)制，就成了0.30000000000000004。

解決方案

思路：

將小數(shù)轉(zhuǎn)化成整數(shù)進(jìn)行計(jì)算，規(guī)避浮點(diǎn)數(shù)運(yùn)算問題。
整數(shù)的加減乘運(yùn)算結(jié)果不會出現(xiàn)浮點(diǎn)數(shù)，不會存在精度問題，但除法會出現(xiàn)浮點(diǎn)數(shù)，因此用toFixed()方法截掉無效的小數(shù)位。
將string轉(zhuǎn)回number輸出

/** 封裝一個(gè)公共方法numberCalculate() 用于浮點(diǎn)數(shù)運(yùn)算 */
//num1 num2傳入兩個(gè)值 symbol +-*/符號
numberCalculate(num1: number, num2: number, symbol: string) {
    var str1 = num1.toString(), str2 = num2.toString(), result, str1Length, str2Length
    try {
        //獲取小數(shù)點(diǎn)后的精度
        str1Length = str1.split('.')[1].length 
    } 
    catch (error) { 
        //解決整數(shù)沒有小數(shù)點(diǎn)方法
        str1Length = 0 
    }
    try { 
        str2Length = str2.split('.')[1].length 
    } catch (error) { 
        str2Length = 0 
    }
    // 取兩個(gè)數(shù)的最小精度，即小數(shù)點(diǎn)后數(shù)字的最大長度
    var maxLen = Math.max(str1Length, str2Length)
    // step將兩個(gè)數(shù)都轉(zhuǎn)化為整數(shù)至少小數(shù)點(diǎn)后移多少位
    var step = Math.pow(10, maxLen)

    switch (symbol) {
        case "+":
        // toFixed()根據(jù)最小精度截取運(yùn)算結(jié)果
        result = ((num1 * step + num2 * step) / step).toFixed(maxLen)
        break;
        case "-":
        result = ((num1 * step - num2 * step) / step).toFixed(maxLen)
        break;
        case "*":
        result = (((num1 * step) * (num2 * step)) / step / step).toFixed(maxLen)
        break;
        case "/":
        result = ((num1 * step) / (num2 * step)).toFixed(maxLen)
        break;
        default:
        break;
    }
    // 由于toFixed方法返回結(jié)果是字符串，還需要轉(zhuǎn)回number輸出
    return Number(result)
}

0.1 + 0.2的計(jì)算，就可以調(diào)用numberCalculate(0.1,0.2,'+')進(jìn)行計(jì)算了。

以上就是一文解決前端JS小數(shù)運(yùn)算精度問題的詳細(xì)內(nèi)容，更多關(guān)于JS小數(shù)運(yùn)算精度的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: