前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用js,对数值保留小数点后两位的处理(两种情况)

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

作者头像
全栈程序员站长
发布2022-08-26 09:22:00
2.3K0
发布2022-08-26 09:22:00
举报
文章被收录于专栏:全栈程序员必看

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

Html部分:

代码语言:javascript
复制
<div class="text primary-text">
  <span>合计:</span>
  <span class="money">{
  
  {totalMoney | numFilter}}</span>
</div>

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

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

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

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

代码语言:javascript
复制
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
  }
}

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

代码语言:javascript
复制
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
}

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年5月1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Html部分:
  • Js部分:(注意toFixed方法只能用于数值型数据)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档