Angular 2：如何将decimalPipe格式化的字符串转回数字？

这个问题我之前做项目时也碰到过——用DecimalPipe格式化后的输入字符串，直接转数字肯定会失败，毕竟多了千分位分隔符、甚至不同地区的小数点符号差异，得先把这些格式化痕迹清理掉才行。下面分享几个实用的解决思路：

如果你的应用只固定用一种locale（比如en-US），直接针对该locale的格式写替换逻辑就行：

• 英文locale下，格式化后是"1,234.56"，只需要去掉千分位逗号：

const formattedInput = "1,234.56";
const numericValue = Number(formattedInput.replace(/,/g, ''));
// 结果：1234.56

• 德语locale（de-DE）下，格式化后是"1.234,56"，要把千分位的点去掉，再把逗号替换成JS识别的小数点：

const formattedInput = "1.234,56";
const numericValue = Number(formattedInput.replace(/\./g, '').replace(',', '.'));
// 结果：1234.56

如果应用支持多语言切换，手动写正则太死板，可以借助Intl.NumberFormat获取当前locale的格式规则，动态处理：
首先在组件里注入LOCALE_ID拿到当前语言环境：

import { LOCALE_ID, Inject } from '@angular/core';

constructor(@Inject(LOCALE_ID) private locale: string) {}

然后写一个通用的解析函数：

parseFormattedNumber(formattedStr: string): number {
  const numberFormat = new Intl.NumberFormat(this.locale);
  // 通过格式化一个测试数字，提取当前locale的分隔符规则
  const formatParts = numberFormat.formatToParts(1234.56);
  const groupSeparator = formatParts.find(part => part.type === 'group')?.value;
  const decimalSeparator = formatParts.find(part => part.type === 'decimal')?.value;

  let processedStr = formattedStr.trim();
  // 移除千分位分隔符
  if (groupSeparator) {
    processedStr = processedStr.replace(new RegExp(`\\${groupSeparator}`, 'g'), '');
  }
  // 替换小数点为JS标准的.
  if (decimalSeparator && decimalSeparator !== '.') {
    processedStr = processedStr.replace(decimalSeparator, '.');
  }

  // 处理无效输入，避免NaN
  const result = Number(processedStr);
  return isNaN(result) ? 0 : result;
}

不管切换到哪个locale，这个函数都能自动适配格式，非常适合多语言项目。

如果需要频繁在数字和格式化字符串之间双向转换，写个自定义双向管道是最省心的：

import { Pipe, PipeTransform, LOCALE_ID, Inject } from '@angular/core';
import { DecimalPipe } from '@angular/common';

@Pipe({
  name: 'customDecimal',
  standalone: true // Angular 14+ 可添加，无需在NgModule声明
})
export class CustomDecimalPipe implements PipeTransform {
  constructor(
    private decimalPipe: DecimalPipe,
    @Inject(LOCALE_ID) private locale: string
  ) {}

  // 正向格式化：数字转带格式的字符串
  transform(value: number, format: string = '1.2-2'): string {
    return this.decimalPipe.transform(value, format, this.locale) || '';
  }

  // 反向解析：格式化字符串转回数字
  parse(value: string): number {
    const numberFormat = new Intl.NumberFormat(this.locale);
    const formatParts = numberFormat.formatToParts(1234.56);
    const groupSeparator = formatParts.find(part => part.type === 'group')?.value;
    const decimalSeparator = formatParts.find(part => part.type === 'decimal')?.value;

    let processedStr = value.trim();
    if (groupSeparator) {
      processedStr = processedStr.replace(new RegExp(`\\${groupSeparator}`, 'g'), '');
    }
    if (decimalSeparator && decimalSeparator !== '.') {
      processedStr = processedStr.replace(decimalSeparator, '.');
    }

    const result = Number(processedStr);
    return isNaN(result) ? 0 : result;
  }
}

然后在模板里配合ngModel使用：

<input 
  [(ngModel)]="myNumber" 
  [ngModelOptions]="{updateOn: 'blur'}" 
  [ngModel]="myNumber | customDecimal:'1.2-2'" 
  (ngModelChange)="myNumber = customDecimalPipe.parse($event)"
>

记得在组件里注入这个自定义管道哦！

建议把解析时机设置在blur事件（也就是输入框失去焦点时），避免用户输入千分位分隔符的过程中，实时解析出现错误。

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