js實現千位分隔符

分別匹配

使用正則匹配主要用到了正向確定預查 (?=pattern)， 這個group不會被匹配結果獲取 關於正向預查

方法一

整數和小數的匹配規則上是不同的。

const numberToKilobitSeparator = targetNum => {
          let reg;
        
          if (/[^\d\.]/.test(targetNum)) return targetNum;
        
          reg = /\./.test(targetNum)
                    ? /(\d{1,3})(?=(\d{3})+\.\d+)/g 
                    : /(\d{1,3})(?=(\d{3})+$)/g;
    
          return targetNum.toString().replace(reg, '$&,')
    }
    
    numberToKilobitSeparator(12345678) // '12,345,678'
    numberToKilobitSeparator(12345678.2345) // '12,345,678.2345'
複製代碼

方法二

實際上咱們只對整數部分進行分割，因此咱們能夠先匹配出來整數而後再單獨對整數進行處理。

const numberToKilobitSeparator = targetNum => {
          if (/[^\d\.]/.test(targetNum)) return targetNum;
          
          return targetNum
                    .toString()
                    .replace(/\d+/,
                        int => int.replace(/(\d{1,3})(?=(\d{3})+$)/g, '$&,'))
    }
    
    numberToKilobitSeparator(12345678) // '12,345,678'
    numberToKilobitSeparator(12345678.2345) // '12,345,678.2345'

複製代碼

方法三 toLocalString

toLocalString MND

const numberToKilobitSeparator = targetNum.toLocalString() => {
          if (/[^\d\.]/.test(targetNum)) return targetNum;
          
          return targetNum.toLocalString()
    }
    
    numberToKilobitSeparator(12345678) // '12,345,678'
    numberToKilobitSeparator(12345678.2345) // '12,345,678.2345'
複製代碼

在實際工做中咱們能夠根據需求來選擇使用哪種方法來實現，總的來講最後一種是最方便的，不過要考慮到ie低版本的兼容問題。通常在面試中可能會有用正則去實現的要求，咱們也應該適當熟悉。