input组件中将数据值转成含有千位符格式的策略

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

toThousandsFormat(number) {
  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
}  

 

posted @ 2020-04-09 21:14  晒太阳的兔子很忙  阅读(496)  评论(0编辑  收藏  举报