Angular 12中实现数字按指定格式添加空格分隔的方法

你需要实现的是将13位数字按1位+2位+2位+3位+3位+2位的规则插入空格，最终匹配x xx xx xxx xxx xx的显示效果，核心实现逻辑和模板使用方式如下：

核心格式化逻辑 #

先写通用格式化函数，兼容数字、字符串类型的输入，自动过滤原有非数字字符，长度超出规则的剩余内容会自动拼接在末尾：

function formatNumBySplitRule(numInput) {
  // 转字符串并清除原有非数字干扰字符
  const numStr = String(numInput).replace(/\D/g, '')
  // 分段规则：按顺序对应每段的字符长度，和你要求的x xx xx xxx xxx xx完全匹配
  const splitLengthList = [1, 2, 2, 3, 3, 2]
  const partList = []
  let cursor = 0
  for (const partLen of splitLengthList) {
    if (cursor >= numStr.length) break
    partList.push(numStr.slice(cursor, cursor + partLen))
    cursor += partLen
  }
  // 处理超出规则长度的剩余内容
  if (cursor < numStr.length) {
    partList.push(numStr.slice(cursor))
  }
  return partList.join(' ')
}

函数测试效果：传入1545852125458时，返回值为1 54 58 521 254 58，完全符合目标格式。如果后续需要调整分段规则，直接修改splitLengthList数组内的长度值即可，无需改动其他逻辑。

模板内使用方案 #

根据你当前用的{{ 变量 }}插值语法，选对应方式接入即可：

• 支持模板内调用函数的场景（Vue、Handlebars、Nunjucks等）：直接在插值位置调用格式化函数

  {{ formatNumBySplitRule(item.numberDir) }}
  

• 不支持模板内调用函数的场景：在获取到列表数据后，提前批量处理好格式化字段再渲染

  // 接口返回数据后统一处理
  dataList.forEach(item => {
    item.formatNumberDir = formatNumBySplitRule(item.numberDir)
  })
  

  模板中直接渲染预处理好的字段：

  {{ item.formatNumberDir }}
  

注意：你需要的是自定义位置的分段，不是通用千分位格式，CSS无法实现这种不规则的字符插入，用上述JS方案是兼容性最好、最灵活的实现方式。

内容的提问来源于stack exchange，提问作者David