哎呀,被大数字运算狠狠打脸了!

之前总结过一篇《#浮点数运算精度丢失、toFixed四舍五入与预期不符问题一次性解决!》,以为在项目开发中靠自己封装的getOperatenNum(加减乘除运算)、toFixed(四舍五入)的两个函数,再也不怕加减乘除运算出问题了。

结果在这两天的一个功能开发中被打脸了。

打脸一:getOperatenNum后精度丢失

js 复制代码
const a = 999999999.999
const b = 999999999.999
d = getOperateNum(a*b,'multiply')
console.log(d)// 结果为999999999998000000

原因:JavaScript中由于Number类型的自身原因,并不能完全表示Long型的数字,在Long长度大于17位时会出现精度丢失的问题,超过17位的部分浏览器会转换为0显示

打脸二:toFixed后的结果与实际严重不符####

js 复制代码
const a = 999999999.999
const b = 999999999.999
const c = 999999999.999
d = toFixed(a*b*c, 3)
console.log(d)// 结果为10

原因: a、b、c 三个数相乘后得到的数字太大了,js自动转化成了科学计数法,如下:

js 复制代码
a*b*c = 9.999999999969999e+26

脸被打的生疼,但是大数字运算的功能还是要完成。

经过一番搜索,最终在项目中引入了专门支持大数字运算的插件decimal.js。并相对应地封装了 getOperateBidNum大数字加减乘除方法、toFixedBigNum大数字四舍五入方法,具体如下:

js 复制代码
import Decimal from "decimal.js"

/**  
 * @param a {string} 运算数1
 * @param b {string} 运算数2
 * @param op {string} 运算类型,有加减乘除(add/subtract/multiply/divide)
 * @param decimal{num} [需要保留的小数位]
 *
 */
export function getOperateBidNum(a, b, op,decimal){
    let res = '';
    switch (op) {
      case 'add':
        res = new Decimal(a).add(new Decimal(b)).toString();
        if(decimal) {
          res = toFixedBigNum(res,decimal)
        };
        return res
        break
      case 'subtract':
        res = new Decimal(a).sub(new Decimal(b)).toString();
        if(decimal) {
          res = toFixedBigNum(res,decimal)
        };
        return res
        break
      case 'multiply':
        res = new Decimal(a).mul(new Decimal(b)).toString();
        if(decimal) {
          res = toFixedBigNum(res,decimal)
        };
        return res
        break
      case 'divide':
        res = new Decimal(a).div(new Decimal(b)).toString();
        if(decimal) {
          res = toFixedBigNum(res,decimal)
        };
        return res
        break
    }
}

/**
 * 四舍五入
 * @param  num     [待处理数字]
 * @param  decimal [需要保留的小数位]
 * @return         最终需要的数字
*/
export function toFixedBigNum(num, decimal) {
  const strfi = String(num);
  const dotPos1 = strfi.indexOf('.');
  if(dotPos1 === -1) {
    return num
  };
  const len1 = strfi.substring(dotPos1+1).length;
  if(len1 <= decimal) {
    return num
  };
  // num的小数位超过保留位数,则进行四舍五入
  const  numStr = strfi.substring(0,dotPos1+decimal+1+1);
  const dotPos2 = numStr.indexOf('.');
  const len2 = numStr.substring(dotPos2+1).length;
  const times = Math.pow(10, len2);
  const intNum = numStr.replace('.','');
  const t = times/10;
  const n = new Decimal(intNum).div(new Decimal('10')).toString();
  const f = new Decimal(Decimal.round(n).toString()).div(new Decimal(t)).toString();
  return f
}
  

这次应该不会再被打脸了吧!

相关推荐
NiNg_1_23417 分钟前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河19 分钟前
CSS总结
前端·css
NiNg_1_23419 分钟前
Vue3 Pinia持久化存储
开发语言·javascript·ecmascript
读心悦21 分钟前
如何在 Axios 中封装事件中心EventEmitter
javascript·http
BigYe程普41 分钟前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
神之王楠1 小时前
如何通过js加载css和html
javascript·css·html
余生H1 小时前
前端的全栈混合之路Meteor篇:关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍1 小时前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发
axihaihai1 小时前
网站开发的发展(后端路由/前后端分离/前端路由)
前端
流烟默1 小时前
Vue中watch监听属性的一些应用总结
前端·javascript·vue.js·watch