快捷導(dǎo)航

vue中如何使用math.js

更新時間：2023年05月20日 09:42:39 作者：崎凌

這篇文章主要介紹了vue中如何使用math.js問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue使用math.js

math.js可以解決前端金額類計(jì)算精度問題

安裝math.js

npm install mathjs

math.js配置

新建math.js文件內(nèi)容如下

const $math = require('mathjs')
export const math = {
? add () {
? ? return comp('add', arguments)
? },
? subtract () {
? ? return comp('subtract', arguments)
? },
? multiply () {
? ? return comp('multiply', arguments)
? },
? divide () {
? ? return comp('divide', arguments)
? }
}
function comp (_func, args) {
? let t = $math.chain($math.bignumber(args[0]))
? for (let i = 1; i < args.length; i++) {
? ? t = t[_func]($math.bignumber(args[i]))
? }
? // 防止超過6位使用科學(xué)計(jì)數(shù)法
? return parseFloat(t.done())
}

建議存放在utils文件夾下

引入math.js

import { math } from '@/utils/math.js'

math.js使用

math.add(a+b)//加
math.subtract(a-b)//減
math.multiply(a*b)//乘
math.divide(a/b)//除

如需其他計(jì)算方法可點(diǎn)擊標(biāo)題math.js進(jìn)入官網(wǎng)查看語法并添加到math.js文件中

vue使用mathjs解決前端計(jì)算精度不足問題

在前端開發(fā)過程中，你會發(fā)現(xiàn)0.1 + 0.2 != 0.3 如下圖

在這里插入圖片描述

他居然等于0.30000000000000004…

為什么會這樣大家可以百度，涉及到10進(jìn)制和2進(jìn)制的轉(zhuǎn)換問題，我們暫不討論，我們先來解決這個問題。

現(xiàn)在有現(xiàn)成的庫給我們調(diào)用 math.js

首先先安裝依賴

npm install mathjs --save

然后再需要計(jì)算的頁面調(diào)用

import * as math from 'mathjs'

下面記錄簡單的加減乘除方法，其余更牛逼的數(shù)學(xué)算法大家可以自行翻文檔研究

加法

// 原本
console.log(0.1 + 0.2) // 0.30000000000000004
// 用math.js之后
const addNumber = math.format(
  math.add(
  	math.bignumber(0.1),math.bignumber(0.2)
  )
)
console.log(addNumber) // 0.3

減法

// 原本
console.log(1 - 0.9) // 0.09999999999999998
// 用math.js之后
const subtractNumber = math.format(
  math.subtract(
  	math.bignumber(1), math.bignumber(0.9)
  )
)
consol(subtractNumber) // 0.1

乘法

// 原本
console.log(10 * 1.2 * 0.3) // 3.5999999999999996
// 用math.js之后
const multiplyMumber = math.format(
  math.multiply(
  	math.bignumber(10), math.bignumber(1.2), math.bignumber(0.3)
  )
)
console.log(multiplyMumber) // 3.6

除法

// 原本
console.log(1.2 / 3) // 0.39999999999999997
// 用math.js之后
const divideNumber = math.format(
  math.divide(
  	math.bignumber(1.2), math.bignumber(3)
  )
)
console.log(divideNumber) // 0.4