快捷導(dǎo)航

js運(yùn)算精度丟失的2個(gè)解決方法

更新時(shí)間：2023年06月08日 15:13:24 作者：AJiu~~

近期在做項(xiàng)目的時(shí)候,遇到了一些JS浮點(diǎn)數(shù)精度的問題,這個(gè)問題其實(shí)說大不大,說小不小,下面這篇文章主要給大家介紹了關(guān)于js運(yùn)算精度丟失的2個(gè)解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

問題所在：

 res.orderColorDeliveryRecords.forEach((item) => {
                        //計(jì)算金額
                        item.money = (item.price * item.amount);
                        if(!item.cusTypeName){
                            item.cusTypeName = 'N/A';
                        }
                        this.record.money += parseFloat(item.money);
                    });

界面顯示：

解決方法1（低精度）：

在運(yùn)算結(jié)果的后面加上toFixed()，精度要求不高的情況下使用;

toFixed介紹：

用法： number.toFixed( value )

參數(shù)：此函數(shù)參數(shù)列表有一個(gè)參數(shù)，他表示小數(shù)點(diǎn)后面精確的位數(shù)。

返回值：他以字符串表示形式返回一個(gè)數(shù)字。

代碼實(shí)現(xiàn)：

res.orderColorDeliveryRecords.forEach((item) => {
    item.money = this.actionOperationResult(item.price , item.amount);
    if(!item.cusTypeName){
        item.cusTypeName = 'N/A';
    }
    this.record.money += parseFloat(item.money);
});

界面顯示：

小結(jié)：

該解決方法只適用于低精度運(yùn)算。并且有弊端，就如上圖界面顯示一樣，最終運(yùn)算結(jié)果是沒有小數(shù)位的，還是將小數(shù)位給顯示出來的。如果不在乎這些還是可以使用的。

解決方法2（高精度）：

先將運(yùn)算值 x 10^n 轉(zhuǎn)換成整數(shù)進(jìn)行運(yùn)算，最后將結(jié)果還原。精度要求高的推薦使用該解決方法。（代碼實(shí)現(xiàn)只實(shí)現(xiàn)了乘法，需要其他運(yùn)算的可以自行更改一下）

代碼實(shí)現(xiàn):

actionOperationResult(val1, val2){
    const p = this.actionOperation(val1, val2);
    return ((val1 * p) * (val2 * p)) / (p * p);
},
actionOperation(val1, val2){
    const len1 = val1.toString().length - val1.toString().indexOf(".") - 1;
    const len2 = val2.toString().length - val2.toString().indexOf(".") - 1;
    const p = Math.max(len1, len2);
    // 避免最終求出結(jié)果的長(zhǎng)度大于最大長(zhǎng)度的時(shí)候?qū)е戮葋G失 開啟下面
    // p += p - Math.min(len1, len2); 
    return  Math.pow(10, p);
}

測(cè)試1：

item.money = this.actionOperationResult(item.price , item.amount);

界面顯示：

測(cè)試2：

const test  = this.actionOperationResult(123.456789435252 , 42.697894);
const test1  = this.actionOperationResult(4342.57897 , 64789.337489);
const test2  = this.actionOperationResult(78.7897398 , 67.768978943);
console.log("test:",test);
console.log("test1:",test1);
console.log("test2:",test2);

輸出結(jié)果：