Skip to content
大纲

字符格式化 - 千分位分隔

  • 数字千位位分隔
  • 手机号按 3-4-4 格式化
  • 银行卡号切分格式

实现数字千分位分隔

国际化之数字价格千分位分隔符

js
// 实现切分千分位

// 1. 使用 toLocaleString 方法
// 小数只能保留 3 位(第二个参数兼容性不好)
// 更多参见 MDN [Number.prototype.toLocaleString()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString)
function thousandth(num) {
  return Number(num).toLocaleString()
}

// testing
console.log(thousandth(1234567890)) // 1,234,567,890
console.log(thousandth(1234567890.123456789)) // 1,234,567,890.123
console.log(thousandth('1234567890.1234567890')) // 1,234,567,890.123

// 2. 使用正则
// 无小数点
let num1 = '1234567890'
num1.replace(/(\d)(?=(\d{3})+$)/g, '$1,')

// 有小数点
let num2 = '1234567890.1234567890'
num2.replace(/(\d)(?=(\d{3})+\.)/g, '$1,')

// /(\d)(?=(\d{3})+(?!\d))/g

// 低版本浏览器报错
// /(?<!\..*)(\d)(?=(?:\d{3})+(?:\.|$))/g

// 金额转千分位
const formatPrice = (number) => {
  number = '' + number

  const [integer, decimal = ''] = number.split('.')

  // prettier-ignore
  return (
    integer.replace(/\B(?=(\d{3})+$)/g, ',') + (decimal ? '.' + decimal : '')
  )
}

console.log(formatPrice(1234567890.123456789)) // 1,234,567,890.1234567

手机号按 3-4-4 格式化

中间使用空格间隔

js
// 手机号分割 3-4-4

// 适合纯 11 位手机
const splitMobile = (mobile, format = '-') => {
  return String(mobile).replace(/(?=(\d{4})+$)/g, format)
}
// 适合 11 位以内的分割
const splitMobile2 = (mobile, format = '-') => {
  return String(mobile)
    .replace(/(?<=(\d{3}))/, format)
    .replace(/(?<=([\d\-]{8}))/, format)
}

// testing
console.log(splitMobile(13521332155)) // 135-2133-2155
console.log(splitMobile2(13521332155)) // 135-2133-2155

银行卡号切分格式