前端精确计算终极解决方案@pinkchen/calc

7 阅读2分钟

前两天说到**@pinkchen/calc**,发现只需要输入对应的公式到函数内部,就可以做到数据的精确计算,其内部也是基于decimal.js的,但真的从易用性和可维护性的角度上解决了前端一直诟病已久的计算问题

才过去几天,这个库已经支持Decimal.js内置函数,并且支持自定义函数

@pinkchen/calc

前端精确计算终极解决方案, 精确计算、轻量、便捷、计算公式易维护、集成 Decimal 数学函数,支持自定义函数,一应俱全。

优势

  1. 💪 支持精确计算
  2. 🎈 轻量,体积小
  3. 🚀 便捷,支持 es,cjs,umd
  4. 🔢 集成 Decimal 内部数学函数
  5. ⚒️ 支持自定义函数,全方面满足定制化需求

bignumber.js用法示例

import BigNumber from "bignumber.js";

// 1+(2-3)*4-5/6
BigNumber(1).plus(BigNumber(2).minus(3).times(4)).minus(BigNumber(5).div(6))

上面这种写法,一眼看去,根本无法快速知道其真实的含义是什么。如果遇到需求变更或者问题排查时,也很难把上面的代码转换为标准公式

@pinkchen/calc安装

npm i @pinkchen/calc -S
// or
yarn add @pinkchen/calc
// or
pnpm add @pinkchen/calc
// or
bun add @pinkchen/calc

具体使用

普通计算

calc('0.1+0.2'); //0.3
calc('22.22*22.22'); //493.7284
calc('(22.22*22.22)'); //493.7284
calc('1 + 2 * (3 - 4 * (5 + 6))'); //-81

带数据源计算

calc('1+22.22/(22.22+a)', { a: 22.22 }); //1.5
calc('a*b', { a: 11, b: 22 }); //242
calc('1+a*b', { a: 11, b: 22 }); //243
calc('aa*bb.bb', { aa: 22, b: 22, bb: { bb: 33 } }); //726
calc('oo.a+oo.b*(oo.c-oo.d.d*(oo.e.e+oo.ff))', { oo: { a: 1, b: 2, c: 3, d: { d: 4 }, e: { e: 5 }, ff: 6 } }); //-81

带函数计算

内部集成了 Decimal.js 中的静态数学函数,函数参见Decimal.js

内置函数也可以使用形如:DC.max(1,2)的方式

calc('max(a+b,0.3)', { a: 0.1, b: 0.2 }); //0.3
calc('1+DC.max(a+b,0.3)', { a: 0.1, b: 0.2 }); //1.3
calc('1+abs(-1-a-1)', { a: -1 }); //2

自定义函数支持

只需要在数据源中注入自定义函数,即可完成定制化

calc('a+max(getSum(a,b)+1, a+c, a+111/(d*e))', { a: 11, b: 12, c: 133, d: 14, e: 15, getSum: (a, b) => a + b }); //155
calc('a+getSum(max(a*b, a+b), b)', { a: 1, b: 2, getSum: (a, b) => a + b }); //6

❗❗❗ 注意:不论是内置函数还是自定义函数,所有参数都会使用 Decimal 做转换,所以自定义函数体内部请按照数字来处理参数

格式化处理

calc('2222.22*2222.22', {}, { separator: true }); //4,938,261.7284
calc('2222.22*2222.22', {}, { digit: 6 }); //4938261.728400
calc('2222.22*2222.22', {}, { preUnit: '$' }); //$ 4938261.7284
calc('2222.22*2222.22', {}, { postUnit: 'USD' }); //4938261.7284 USD
calc('2222.22*2222.22', {}, { percentage: true }); //49382.617284 %
calc('2222.22*2222.22', {}, { permillage: true }); //4938.2617284 ‰
calc(
  '99.9999499/100',
  {},
  {
    separator: true,
    digit: 4,
    preUnit: '您的技术水平超越了',
    postUnit: '的同行',
    percentage: true,
  }
); //您的技术水平超越了 99.9999 % 的同行

总结

真的是只需要把公式直接丢给calc函数就能返回精确计算后的值,真的是方便至极!需求变更或者问题排查时,一眼定位,轻松搞定!

npm地址

www.npmjs.com/package/@pi…