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

  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值