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

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

這篇文章主要給大家介紹了關于保姆級Decimal.js使用的相關資料,文中介紹的方法主要解決了js精度問題,decimal.js庫它是一個強大的JavaScript庫,用于解決浮點數計算精度不準確的問題,需要的朋友可以參考下

精度問題控制臺圖樣

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

01.引入Decimal.js

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

$ 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的結果', 8.12*100)
    console.log('打印9.12*100的結果', 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項目完整例子

下面是一個完整的示例，展示了如何在Vue項目中使用decimal.js庫進行高精度計算：

<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)建了兩個Decimal對象，并使用plus()方法執(zhí)行加法運算。最后，通過toNumber()方法將結果轉換為JavaScript原生的Number類型，并綁定到Vue組件的result數據屬性上，以在模板中顯示計算結果。