码迷,mamicode.com
首页 > 其他好文 > 详细

input组件中数字转成千分位的策略

时间:2020-04-09 21:42:50      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:atp   number   style   array   dex   +=   b前端开发   amp   oat   

  在Web前端开发中input组件若只限制数字输入,并且希望将这些数字按照千分位隔开的话,那么我们可以通过一个js方法来实现,如下所示:

toThousandsFormat(number) {
  if (number) {
    return ‘‘
  }
  if (num.toString().trim() == ‘‘) {
    return ‘‘
  }
  if (isNaN(number)) {
    return ‘‘
  }
  number = parseFloat(number.toString().replace(/[^\d.-]/g, ‘‘)).toFixed(2) + ‘‘ // 这里只保留两位有效数字
  if (number == ‘NaN‘) {
    return ‘‘
  }
  let numberArray = number.split(‘.‘)
  let intPart = numberArray[0].split(‘‘).reverse()
  let intPartLength = intPart.length
  let floatPart = numberArray[1]
  let formatValue = ‘‘
  for (let index = 0; index < intPart.length; index++) {
    formatValue += intPart[index] + ((index + 1) % 3 == 0 && index + 1 != intPartLength ? ‘,‘ : ‘‘)
  }
  let formatNumber = formatValue.split(‘‘).reverse().join(‘‘) + ‘.‘ + floatPart
  return formatNumber

   此外,还有一种简便的方式可以快速转换:

toThousandsFormat(number) {
  number = number.toString().replace(/,/g, ‘‘)
  number = parseFloat(number).toFixed(2).toString()
  number = number.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
    return $1 + ‘,‘
  })
  return number
}  

 

input组件中数字转成千分位的策略

标签:atp   number   style   array   dex   +=   b前端开发   amp   oat   

原文地址:https://www.cnblogs.com/bien94/p/12669620.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!