使用js,对数值保留小数点后两位的处理(两种情况)

使用js,对数值保留小数点后两位的处理(两种情况)Html部分:<divclass=”textprimary-text”><span>合计:</span><spanclass=”money”>¥{{totalMoney|numFilter}}</span></div>Js部分:(注意toFixed方法只能用于数值型数据)//情况一:保留…

大家好,又见面了,我是你们的朋友全栈君。

Html部分:

<div class="text primary-text">
  <span>合计:</span>
  <span class="money">{
  
  {totalMoney | numFilter}}</span>
</div>

Js部分:(注意toFixed方法只能用于数值型数据)

//  情况一:保留小数点后两位的过滤器,尾数四舍五入

filters: {
  numFilter (value) {
    let realVal = ''
    if (!isNaN(value) && value!== '') {
      // 截取当前数据到小数点后两位
      realVal = parseFloat(value).toFixed(2)
    } else {
      realVal = '-'
    }
    return realVal
  }
}

//  情况二:保留小数点后两位的过滤器,尾数不四舍五入(此处存在一个问题,当源数据小数点第三位为数字9,并且第四位会导致第三位进位的情况下,得到的最终数据仍然不是截取 eg: 3.1798 截取两位会变成3.18)

filters: {
  numFilter (value) {
    let realVal = ''
    if (!isNaN(value) && value!== '') {
      // 截取当前数据到小数点后三位
      let tempVal = parseFloat(value).toFixed(3)
      realVal = tempVal.substring(0, tempVal.length - 1)
    } else {
      realVal = '-'
    }
    return realVal
  }
}

  //  情况二:优化成如下方式,自行封装成一个公共函数,即用即调 

filters: {
  numFilter (value) {
    return cutOutNum(value) 
  }
}

-----  将此函数封装在外部js中  -----
 
/**
 * 对源数据截取decimals位小数,不进行四舍五入
 * @param {*} num 源数据
 * @param {*} decimals 保留的小数位数
 */
export const cutOutNum = (num, decimals = 2) => {
  if (isNaN(num) || (!num && num !== 0)) {
    return '-'
  }

  function toNonExponential (_num) {
    var m = Number(_num).toExponential().match(/\d(?:\.(\d*))?e([+-]\d+)/)
    return Number(_num).toFixed(Math.max(0, (m[1] || '').length - m[2]))
  }

  // 为了兼容科学计数法的数字
  num = toNonExponential(num)
  // 获取小数点的位置 + 1(不存在小数点的indexOf值为-1)
  const pointIndex = String(num).indexOf('.') + 1
  // 获取小数点后的个数(需要保证有小数位)
  const pointCount = pointIndex ? String(num).length - pointIndex : 0

  // 补零函数
  function zeroFill (zeroNum, num) {
    for (let index = 0; index < zeroNum; index++) {
      num = `${num}0`
    }
    return num
  }

  // 源数据为"整数"或者小数点后面小于decimals位的作补零处理
  if (pointIndex === 0 || pointCount <= decimals) {
    let tempNumA = num
    // 区分"整数"和"小数"的补零
    if (pointIndex === 0) {
      tempNumA = `${tempNumA}.`
      tempNumA = zeroFill(decimals - pointCount, tempNumA)
    } else {
      tempNumA = zeroFill(decimals - pointCount, tempNumA)
    }
    return String(tempNumA)
  }

  // 截取当前数据到小数点后decimals位
  const Int = String(num).split('.')[0]
  const Decimal = String(num).split('.')[1].substring(0, decimals)
  const tempNumB = `${Int}.${Decimal}`

  // 需求:数据为0时,需要显示为0,而不是0.00...
  return Number(tempNumB) === 0 ? 0 : tempNumB
}

                                                

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143256.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Java集合篇:HashMap原理详解(JDK1.7及之前的版本)

    Java集合篇:HashMap原理详解(JDK1.7及之前的版本)

  • Web 3D机房,智能数字机房HTML5 WebGL(ThreeJS)匠心打造「建议收藏」

    Web 3D机房,智能数字机房HTML5 WebGL(ThreeJS)匠心打造「建议收藏」在H5使用3D技术门槛比较低了,它的基础是WebGL(ThreeJS),一个OpenGL的浏览器子集,支持大部分主要3D功能接口。目前主流的浏览器都有较好的支持,IE需要11。最近web3D机房研发告一段落,有时间整理这段时间的一些成果。主要涉及使用H5、js、WebGL技术。机房3D效果图机房线缆和走线架线缆的连接走向和连接关系是管理员关注的焦点。机架中…

  • mac 安装golang2021 激活码_在线激活

    (mac 安装golang2021 激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • Silverlight网站实例资源收集(1)

    Silverlight网站实例资源收集(1)Silverlight做的试用VisualStudio2008http://www.challenges.com.cn/ 全功能的相册http://msbluelight-0.agappdom.net/e1/d/72193/13304799/63356644800/0.vpFl7uJ79e1H4xExhhjCX701HlA/zziframehtml2zz.html#%2f%2

    2022年10月18日
  • Linux nmap命令整理

    Linux nmap命令整理nmap–iflist:查看本地主机的接口信息和路由信息-A:选项用于使用进攻性方式扫描-T4:指定扫描过程使用的时序,总有6个级别(0-5),级别越高,扫描速度越快,但也容易被防火墙或IDS检测并屏蔽掉,在网络通讯状况较好的情况下推荐使用T4-oXtest.xml:将扫描结果生成test.xml文件,如果中断,则结果打不开-oAtest.xml:将扫描结果生成test.xml文件,中断后,结果也可保存-oGtest.txt:将扫描结果生成test…

  • git命令–切换分支[通俗易懂]

    git命令–切换分支[通俗易懂]&gt;我们在日常开发中,有时需要从github或者gitee上拉取新项目,但是拉取的那个项目可能有很多分支,然后本地拉取后只有一个默认分支(一般是master)。甚至可能只有一个readme.md文件。。 &gt;如果我们想查看远程的其他分支该怎么办呢? **gitbranch**&gt;首先进入项目根目录(有个.git文件的那个目录),执行`gitbranch`命…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号