JavaScript/Angular：如何转换数字至浏览器locale或识别数字字符串locale？

针对你提出的两个问题，以下是具体的实现方案：

首先需要将用户输入的非标准数字字符串解析为JavaScript的Number类型，再使用浏览器当前的locale进行格式化。核心在于处理不同locale的千分分隔符和小数点差异：

实现步骤： #

• 识别输入字符串中的千分分隔符和小数点：通过统计符号出现次数判断（小数点仅出现1次，千分分隔符可能多次）
• 将输入字符串转换为标准数字格式（移除千分分隔符，将小数点替换为.）
• 使用navigator.language获取浏览器当前locale，调用Number.toLocaleString()格式化

代码实现（TypeScript）： #

function parseNumberFromString(input: string): number | null {
  // 去除所有空白字符
  const cleaned = input.replace(/\s/g, '');
  
  // 统计逗号和点的出现次数
  const commaCount = (cleaned.match(/,/g) || []).length;
  const dotCount = (cleaned.match(/\./g) || []).length;

  let thousandsSep: string, decimalSep: string;

  if (commaCount === 1 && dotCount > 1) {
    // 德语格式：10.000,00 → 逗号是小数点，点是千分分隔
    thousandsSep = '.';
    decimalSep = ',';
  } else if (dotCount === 1 && commaCount > 1) {
    // 印度英语格式：10,000.00 → 点是小数点，逗号是千分分隔
    thousandsSep = ',';
    decimalSep = '.';
  } else if (commaCount === 1 && dotCount === 0) {
    // 仅逗号作为小数点（如法语：10000,00）
    decimalSep = ',';
    thousandsSep = '';
  } else if (dotCount === 1 && commaCount === 0) {
    // 标准小数点格式
    decimalSep = '.';
    thousandsSep = '';
  } else {
    // 无分隔符或无法识别的格式，直接尝试转换
    const num = Number(cleaned);
    return isNaN(num) ? null : num;
  }

  // 替换千分分隔符，统一小数点为.
  const standardStr = cleaned.replace(new RegExp(thousandsSep, 'g'), '').replace(decimalSep, '.');
  const num = Number(standardStr);
  return isNaN(num) ? null : num;
}

function convertToBrowserLocale(input: string): string | null {
  const num = parseNumberFromString(input);
  if (num === null) return null;
  
  const browserLocale = navigator.language;
  // 根据输入的小数部分长度保留对应位数
  const decimalPart = input.split(/[.,]/)[1];
  const minimumFractionDigits = decimalPart ? decimalPart.length : 0;
  
  return num.toLocaleString(browserLocale, {
    minimumFractionDigits,
    maximumFractionDigits: 20 // 避免截断过多小数位
  });
}

使用示例： #

// 输入德语格式数字，浏览器locale为en-US时输出 "10,000.00"
console.log(convertToBrowserLocale("10.000,00"));

通过预定义常见locale的数字格式规则，匹配输入字符串的模式来识别对应的locale。需要注意不同locale的千分分隔符、小数点及分组规则：

实现步骤： #

• 建立常见locale的格式规则库（包含千分分隔符、小数点、正则匹配模式）
• 遍历规则库，测试输入字符串是否符合对应locale的模式
• 返回第一个匹配的locale（可通过调整规则优先级适配需求）

代码实现（TypeScript）： #

interface LocaleNumberRule {
  thousandsSeparator: string;
  decimalSeparator: string;
  pattern: RegExp;
}

const localeNumberRules: Record<string, LocaleNumberRule> = {
  'en-IN': {
    thousandsSeparator: ',',
    decimalSeparator: '.',
    pattern: /^\d{1,3}(,\d{3})*(\.\d+)?$/ // 匹配印度英语格式：1,00,000.00 或 10,000.00
  },
  'de': {
    thousandsSeparator: '.',
    decimalSeparator: ',',
    pattern: /^\d{1,3}(\.\d{3})*(,\d+)?$/ // 匹配德语格式：10.000,00 或 1.000.000,50
  },
  'fr': {
    thousandsSeparator: ' ',
    decimalSeparator: ',',
    pattern: /^\d{1,3}( \d{3})*(,\d+)?$/ // 匹配法语格式：10 000,00 或 1 000 000,50
  },
  'en-US': {
    thousandsSeparator: ',',
    decimalSeparator: '.',
    pattern: /^\d{1,3}(,\d{3})*(\.\d+)?$/ // 匹配美式英语格式：10,000.00
  }
};

function identifyLocale(numberStr: string): string | null {
  const cleaned = numberStr.replace(/^\s+|\s+$/g, ''); // 去除首尾空格
  
  for (const [locale, rule] of Object.entries(localeNumberRules)) {
    if (rule.pattern.test(cleaned)) {
      // 额外验证小数点位置（避免匹配到仅用符号分隔的非数字格式）
      if (cleaned.includes(rule.decimalSeparator)) {
        const decimalIndex = cleaned.lastIndexOf(rule.decimalSeparator);
        if (decimalIndex === cleaned.length - 1) continue;
      }
      return locale;
    }
  }
  
  return null;
}

使用示例： #

console.log(identifyLocale("10,000.00")); // 返回 'en-IN'
console.log(identifyLocale("10.000,00")); // 返回 'de'
console.log(identifyLocale("10 000,00")); // 返回 'fr'

注意事项： #

• 部分locale的数字格式可能存在重叠（如en-IN和en-US的基础模式一致），可通过扩展正则规则区分细节分组（如印度的三位后两位分组：/^\d{1,2}(,\d{2})*(\.\d+)?$/）
• 对于罕见locale或自定义格式，需补充规则库

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