美文网首页
decimal.js的简单封装

decimal.js的简单封装

作者: 坚持不了 | 来源:发表于2020-03-06 18:29 被阅读0次

js的计算有精度问题,在业务处理中总是会出现莫名其妙的数据,在这里我们使用decimal.js解决计算精度问题。
然而decimal.js直接使用如果多个值相加(或相减)会十分的麻烦,所以针对全是加/减/乘/除某一项的操作做了简单的封装。

1.npm安装decimal.js

$ npm install --save decimal.js

or

$ npm add decimal.js

2.在common文件夹中创建一个js的文件

我喜欢放在common中,大家随意。。。

3.在js文件中引入decimal.js并开始简单的封装

import { Decimal } from "decimal.js";
// args第一位为被操作数据

//加法
function add(...args) {
    let result = new Decimal(args[0]);
    for (let i = 1; i < args.length; i++) {
        result = result.add(new Decimal(args[i]));
    }
    return result.toNumber();
}
//减法
function sub(...args) {
    let result = new Decimal(args[0]);
    for (let i = 1; i < args.length; i++) {
        result = result.sub(new Decimal(args[i]));
    }
    return result.toNumber();
}
//乘法
function mul(...args) {
    let result = new Decimal(args[0]);
    for (let i = 1; i < args.length; i++) {
        result = result.mul(new Decimal(args[i]));
    }
    return result.toNumber();
}
//除法
function div(...args) {
    let result = new Decimal(args[0]);
    for (let i = 1; i < args.length; i++) {
        result = result.div(new Decimal(args[i]));
    }
    return result.toNumber();
}

export default {
    add,
    sub,
    mul,
    div
};

4.使用

(1)全局使用,在main.js引入封装的js文件并挂到vue上

import decimal from "./common/decimal";
Vue.prototype.decimal = decimal;

其他页面使用只需要

let a = this.decimal.add(1,2,3,4);
console.log(a); //10

(2)页面单独引入使用

import decimal from "./common/decimal";

let a = decimal.add(1,2,3,4);
console.log(a); //10

大概就这样了,这只是简单的进行封装,如果有复杂的使用,如a-b+c*d/e这种,大家可以根据业务进行封装。
以上,如有啥问题或更好的想法请指教。^ ^

相关文章

网友评论

      本文标题:decimal.js的简单封装

      本文链接:https://www.haomeiwen.com/subject/robwrhtx.html