vue封装mathjs和Decimal.js加减乘除，解决精度问题

math.js

一、安装mathjs

通过npm安装，运行：npm install mathjs

二、利用mathjs封装加减乘除

1、在封装的js文件中引入此次封装要使用的mathjs中提供的函数

import { bignumber, chain } from "mathjs";

2、封装

//根据math.js加减乘除计算封装,参数数字只能number和null类型,当数字超过2^54-1时，可能会出现精度问题
//因为引入chain，即便是按需引入，可能由于chain涉及到的数据方法太多，导致打包时，dist文件直接大了1M左右。
export const calculate = {
  comp: function (_func, args) {
    let t = chain(bignumber(args[0]));
    for (let i = 1; i < args.length; i++) {
      if (typeof args[i] === "number" || typeof args[i] === "null") {
        t = t[_func](bignumber(args[i]));
      }
    }
    // 防止超过6位使用科学计数法
    return parseFloat(t.done());
  },
  //加
  add: function () {
    return this.comp("add", arguments);
  },
  //减
  subtract: function () {
    return this.comp("subtract", arguments);
  },
  //乘
  multiply: function () {
    return this.comp("multiply", arguments);
  },
  //除
  divide: function () {
    return this.comp("divide", arguments);
  },
};

三、使用

1、在需要使用计算的地方引入“二”步骤中封装的函数

import { calculate } from "@/utils/index";

2、使用示例

created() {
	console.log(calculate.add(0.1,0.2)); // 0.3
	console.log(calculate.subtract(0.1,0.2)); // -0.1
	console.log(calculate.multiply(0.1,0.2)); // 0.02
	console.log(calculate.divide(0.1,0.2)); // 0.5
	console.log(calculate.add(0.1,0.2,0.3)); // 0.6
	// 暂时没有封装多运算，如果需要链式运算，请参考https://www.mathjs.cn/examples/chaining.js.html进行封装
	console.log(calculate.add(0.1,0.2).subtract(0.1)); // 报错
},

四、更多mathjs使用

中文官方文档参考(目前不知道啥原因不能访问了)：https://www.mathjs.cn/docs/getting_started.html
英文官方文档参考：https://mathjs.org/

Decimal.js

一、安装Decimal.js

通过npm安装：npm install --save decimal.js

二、利用Decimal.js封装加减乘除

1、在封装的js文件中引入Decimal.js

import Decimal from "decimal.js";

2、封装

// 根据Decimal.js加减乘除计算封装,传参转换后只能是数字类型,且不能超过最大安全整数，否则返回NaN
export function calculator(value) {
  try {
    if (
      (Number(value) || value == 0) &&
      !isNaN(value) &&
      Math.abs(value) <= Number.MAX_SAFE_INTEGER
    ) {
      const decimal = new Decimal(value);
      return {
        add(num) {
          return decimal.add(num);
        },
        subtract(num) {
          return decimal.sub(num);
        },
        multiply(num) {
          return decimal.mul(num);
        },
        divide(num) {
          return decimal.div(num);
        },
      };
    } else {
      Message.warning("请输入合理数字！");
      const decimal = new Decimal(NaN);
      return decimal;
    }
  } catch (error) {
    console.error(error);
  }
}

三、使用

1、在需要使用计算的地方引入“二”步骤中封装的函数

import { calculator } from "@/utils/index";

2、使用示例

console.log(calculator(912).add(9.00719).toNumber());
//console.log(calculator(0.1).add(1.235).toFixed());
//console.log(calculator.add("0.2").add(0.1).getValue());

四、更多Decimal.js使用

中文文档地址：https://lixingwu.gitee.io/decimal.js_cn/cn/index.html