快捷導(dǎo)航

前端vue項目如何使用Decimal.js做加減乘除求余運算

更新時間：2024年05月28日 08:59:23 作者：H_HX126

decimal.js是使用的二進(jìn)制來計算的,可以更好地實現(xiàn)格化式數(shù)學(xué)運算,對數(shù)字進(jìn)行高精度處理,使用decimal類型處理數(shù)據(jù)可以保證數(shù)據(jù)計算更為精確,這篇文章主要給大家介紹了關(guān)于前端vue項目如何使用Decimal.js做加減乘除求余運算的相關(guān)資料,需要的朋友可以參考下

1 vue項目安裝Decimal

npm install decimal.js

2 注意

運算結(jié)果是Decimal對象，需要使用.toNumber()轉(zhuǎn)為數(shù)字

3 加 add

const Decimal = require('decimal.js')
const num1 = Decimal("5");
const num2 = Decimal("3");
const remainder = num1.add(num2);

4 減 sub

const Decimal = require('decimal.js')
const num1 = Decimal("5");
const num2 = Decimal("3");
const remainder = num1.sub(num2);

5 乘 mul

const Decimal = require('decimal.js')
const num1 = Decimal("5");
const num2 = Decimal("3");
const remainder = num1.mul(num2);

6 除 div

const Decimal = require('decimal.js')
const num1 = Decimal("5");
const num2 = Decimal("3");
const remainder = num1.div(num2);

7 求余 modulo

const Decimal = require('decimal.js')
const num1 = Decimal("5");
const num2 = Decimal("3");
const remainder = num1.modulo(num2);

附：vue 使用decimal.js 解決小數(shù)相加合計精確度丟失問題

安裝依賴 decimal.js
- npm install --save decimal.js
封裝
- 在utils文件夾下創(chuàng)建decimal.js文件

import { Decimal } from 'decimal.js'
export function add (x, y) {
    if (!x) {
        x = 0
    }
    if (!y) {
        y = 0
    }
    const xx = new Decimal(x)
    const yy = new Decimal(y)
    return xx.plus(yy).toNumber()
}
// 減
export function sub (x, y) {
    if (!x) {
        x = 0
    }
    if (!y) {
        y = 0
    }
    const xx = new Decimal(x)
    const yy = new Decimal(y)
    return xx.sub(yy).toNumber()
}
// 除
export function div (x, y) {
    if (!x) {
        x = 0
    }
    if (!y) {
        return 0
    }
    const xx = new Decimal(x)
    const yy = new Decimal(y)
    return xx.div(yy).toNumber()
}
//乘
export function mul (x, y) {
    if (!x) {
        x = 0
    }
    if (!y) {
        y = 0
    }
    const xx = new Decimal(x)
    const yy = new Decimal(y)
    return xx.mul(yy).toNumber()
}

頁面使用

<script>
  import {add} from "@/utils/decimal"
  export default {
    methods:{
      handlePlus() {
        add(10.5,4.877)
      }
    }
  }
</script>