數字三位數後加逗号

需求背景： 最近做首頁，需求是數字的動态增長及數字的三位數加逗号，金額的顯示處理。

1.如何處理整數。需求：整數每三位數一個逗号。

Vue 項目，使用filters函數。在export default 裡寫該函數。然後{{val | numFormat}},即可生效。

filters:{
    numFormat(val)  {
      if(!val)  return '0'
      return val.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')
  }
}
           

2.處理金額數字的過濾函數。在export default 裡寫該函數。然後{{val | dollarNum}},即可生效。

filters:{
    dollarNum(val) {
      if(!val) return '0.00'
      const intPart = Number(val).toFixed(0) //擷取整數部分
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,') //整數部分逢三斷一
      let floatPart = '.00'
      const valArray = val.split('.') 
     if(valArray.length === 2) {
         floatPart = valArray[1].toString()
         if (floatPart.length === 1) {
           return `${intPartFormat}.${floatPart}0`
         } else {
           return `${intPartFormat}.${floatPart}`
         }
      } else {
          return `${intPartFormat}${floatPart}`
       }
   }
}
           

3.數字增長的動态顯示。

<span ref="numberGrow"  :data-time= "time" :data-value="totalInfo.value">0</span>

data() {
  return {
    time: 2
  }
}
//這個寫到methods裡
numberGrow(ele) {
    const _this = this
    const step = Math.ceil((_this.totalInfo.value * 10) / (_this.time * 1000))
    let current = 0
    let start = 0
   let t = setInterVal (function(){
      start += step 
      if (start > _this.totalInfo.value) {
        clearInterval(t)
        start = _this.totalInfo.value
        t = null
     }
    if (current ==== start) {
        return
    }
    current = start 
    ele.innerHtml = current.toSting().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')
  },10)
}
// 使用：在請求回來的資料後，調用該方法，即可實作動态增長資料。
this.numberGrow(this.refs.numberGrow)