高精度计算库math.js使用踩坑记

前情

最近在做一个后端需求,需求中需要前端做一些金额数字计算,前端对于小数的计算一直都有精度问题,如0.1+0.2计算的结果并不是0.3,而是0.30000000000000004,于是引入高精度计算库math.js来解决前端计算的精度问题。

坑位

这次做的需求是一个退货扣款的需求,如果用户退回来的商品有磨损或者破坏需要进行扣除押金,但是扣除的金额不能超过押金,如果超过押金那就只能扣除押金的金额,开发中功能一切正常,测试也正常,但是一发布到线上发现无法正常工作,对于押金100的商品我想扣除50,正常来说扣款金额应该是50,但是实际显示扣款100,导致提交时和服务端计算的值进行校验不通过,以致始终无法完成数据提交,测试和我又立马回到测试服自测又是一切正常。

Why?

使用math.js转换或者计算方法计算完的值并不是数字,而是特有的BigNumber对象,当你直接拿对象比较的时候,它会调用对象的valueOf方法转换为字符串做比较,而字符串比较是按位比较大小的,所以‘50’跟’100’比,因为5>1所以’50’大于’100’,关键代码如下,为了好理解其中变量被替换成中文:

...
// 实际扣款金额 违约金+磨损扣款金额,不能大于押金
const actualDeductionAmount = computed(() => {
  let total = add(
    bignumber(违约金 || 0),
    bignumber(扣款金额 || 0)
  );
  let deposit = bignumber(押金金额 || 0);
  if (total > deposit) {
    total = deposit;
  }
  return format(total, { precision: 2, notation: "fixed" });
});
...

为什么测试服是好的了,是因为这种扣款是不可退回的,测一次自己要损失一笔钱,于是测试服配置的商品都是小于1的金额的,首位大小都是0,导致比较结果都是正确的,也就没有测试出来。
简单demo测试地址:JS Bin - Collaborative JavaScript Debugging

解决方案

在做比较时使用math.js提供的转数字方法number进行转换后再执行比较,保证数字与数字的比较就不会有问题。

...
// 实际扣款金额 违约金+磨损扣款金额,不能大于押金
const actualDeductionAmount = computed(() => {
  let total = add(
    bignumber(违约金 || 0),
    bignumber(扣款金额 || 0)
  );
  let deposit = bignumber(押金金额 || 0);
  if (number(total) > number(deposit)) {
    total = deposit;
  }
  return format(total, { precision: 2, notation: "fixed" });
});
...

思考

使用第三方工具库时要细看官方文挡,并确定你按收到的返回值是什么类型,此次使用前确实有浏览官方文挡的,但是个人英文真的很一般,不得不百度搜了一些使用教程,那些简易使用教程并没有明确说明返回的值类型,最近也在偶尔刷英语,希望能提高一些英语,对于程序员会英语还是很有帮助的,同时对于自测的时候应该多考虑一些边界值,此次测试都只测了小数金额而同有测整数,也导致问题一直拖到生产环境,幸好的是没有导致线上什么经济损失,不然就尴尬了。

posted @ 2024-10-19 19:30  !win !  阅读(29)  评论(0编辑  收藏  举报