快捷導(dǎo)航

保姆級(jí)Decimal.js使用教程(解決js精度問題)

更新時(shí)間：2024年05月07日 09:22:48 作者：碼路老默007

這篇文章主要給大家介紹了關(guān)于保姆級(jí)Decimal.js使用的相關(guān)資料,文中介紹的方法主要解決了js精度問題,decimal.js庫它是一個(gè)強(qiáng)大的JavaScript庫,用于解決浮點(diǎn)數(shù)計(jì)算精度不準(zhǔn)確的問題,需要的朋友可以參考下

精度問題控制臺(tái)圖樣

如果銀行的業(yè)務(wù)你這樣做，不知道要損失多少錢，這樣是不行的，計(jì)算的不準(zhǔn)確是需要背鍋的，我們給后端去做吧，其實(shí)我們前端也是可以做的，引入Decimal.js

01.引入Decimal.js

decimal.js是使用的二進(jìn)制來計(jì)算的，所以可以更好地實(shí)現(xiàn)格化式數(shù)學(xué)運(yùn)算，對(duì)數(shù)字進(jìn)行高精度處理；使用decimal類型處理數(shù)據(jù)可以保證數(shù)據(jù)計(jì)算更為精確，還可以節(jié)省儲(chǔ)存空間。

$ npm install --save decimal.js
/**  Node.js  */
var Decimal = require('decimal.js')
 
/** ES6 方式 */
import { Decimal } from 'decimal.js'

02.使用

<template>
  <div>
    test
  </div>
</template>
<script>

import Decimal from 'decimal.js'

export default {
  created() {
    console.log('打印8.12*100的結(jié)果', 8.12*100)
    console.log('打印9.12*100的結(jié)果', 9.12*100)

    let c = new Decimal(8.12).mul(new Decimal(100))
    let d = new Decimal(9.12).mul(new Decimal(100))
    console.log('c', c)
    console.log('d', d)
  }
}
</script>

加減乘除全上

 const a = 9.98;
 const b = 8.03;
 
 // 加法
 let c = new Decimal(a).add(new Decimal(b)) 
 
 // 減法
 let d = new Decimal(a).sub(new Decimal(b))
 
 // 乘法
 let e = new Decimal(a).mul(new Decimal(b))
    
 // 除法
 let f = new Decimal(a).div(new Decimal(b))

附：Vue項(xiàng)目完整例子

下面是一個(gè)完整的示例，展示了如何在Vue項(xiàng)目中使用decimal.js庫進(jìn)行高精度計(jì)算：

<template>
  <div>
    <p>0.1 + 0.2 = {{ result }}</p>
  </div>
</template>

<script>
import { Decimal } from 'decimal.js';

export default {
  data() {
    return {
      result: null,
    };
  },
  mounted() {
    const num1 = new Decimal(0.1);
    const num2 = new Decimal('0.2');
    const sum = num1.plus(num2);
    this.result = sum.toNumber();
  },
};
</script>

在上述示例中，我們通過Decimal類創(chuàng)建了兩個(gè)Decimal對(duì)象，并使用plus()方法執(zhí)行加法運(yùn)算。最后，通過toNumber()方法將結(jié)果轉(zhuǎn)換為JavaScript原生的Number類型，并綁定到Vue組件的result數(shù)據(jù)屬性上，以在模板中顯示計(jì)算結(jié)果。