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低版本的兼容问题。一般在面试中可能会有用正则去实现的要求，我们也应该适当熟悉。