Angular中如何按指定格式、小数与分组分隔符解析数字？

Hey there! As a fellow Java dev who's worked with DecimalFormat before, I get exactly what you're looking for—something that lets you define custom number formats (with arbitrary separators) and can both format numbers to strings and parse those strings back to numbers.

Unfortunately, Angular doesn't have a built-in tool that's a 1:1 match for DecimalFormat. The formatNumber utility and NumberPipe you found only handle formatting, not parsing, and the regex workarounds you've seen are indeed clunky and not great for internationalization.

Let's break down your best options:

1. Native Intl.NumberFormat (With Custom Parsing) #

Modern browsers support the native Intl.NumberFormat API, which handles internationalized formatting out of the box. It doesn't let you set arbitrary separators directly (like your | for decimals and ^ for grouping), but you can add a simple parsing function to handle custom cases:

// Example: Parse your custom-formatted string
function parseCustomNumber(str: string, groupSep: string, decimalSep: string): number {
  // Normalize the string to use standard separators
  const normalized = str.replace(new RegExp(`\\${groupSep}`, 'g'), '')
                         .replace(decimalSep, '.');
  return parseFloat(normalized);
}

// Test with your sample input
const parsedNum = parseCustomNumber('8^453|13', '^', '|'); // Returns 8453.13

For standard locale-based formatting (like commas vs periods for decimals), Intl.NumberFormat works perfectly for formatting, and the above parsing logic adapts nicely.

2. External Libraries (For Full DecimalFormat-Like Flexibility) #

If you need the exact flexibility of DecimalFormat—like defining format patterns (#,##0.###) and arbitrary separators—these libraries are your best bet:

Numeral.js (Lightweight & Pattern-Based) #

This library uses pattern syntax similar to DecimalFormat, making it easy to adapt if you're used to Java's approach. You can define custom formats for both parsing and formatting:

import numeral from 'numeral';

// Register a custom format matching your example
numeral.register('format', 'weird', {
  format: function(value: number) {
    // Format using standard pattern, then swap separators
    return numeral(value).format('0,0.000').replace(',', '^').replace('.', '|');
  },
  unformat: function(str: string) {
    // Swap custom separators back to standard, then parse
    const normalized = str.replace('^', ',').replace('|', '.');
    return numeral(normalized).value();
  }
});

// Usage
const formatted = numeral(8453.13).format('weird'); // Outputs "8^453|13"
const parsed = numeral('8^453|13').value(); // Parses back to 8453.13

Dinero.js (Robust for Financial Use Cases) #

If you're working with currency or need strict number handling (to avoid floating-point errors), Dinero.js is a great choice. It supports custom separators and parsing:

import { Dinero, parse } from 'dinero.js';
import { USD } from '@dinero.js/currencies';

// Parse your custom string
const parsedDinero = parse('8^453|13', {
  currency: USD,
  decimalSeparator: '|',
  groupSeparator: '^'
});

// Format it back using the same custom rules
const formatted = parsedDinero.toFormat({
  decimalSeparator: '|',
  groupSeparator: '^',
  precision: 3
});

Final Takeaway #

• Angular has no built-in equivalent to DecimalFormat—its native tools only handle formatting.
• For simple cases, use Intl.NumberFormat with a custom parsing function.
• For full pattern-based flexibility, go with Numeral.js (lightweight) or Dinero.js (strict financial handling).

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