How to format a number with commas in JavaScript

1toLocaleString('en-US')Recommended

Every number has a toLocaleString(locales, options) method that returns a formatted string. With 'en-US' you get commas between groups of three digits and a dot for the decimal point. It handles negatives and large integers, and it needs no setup, which makes it the right call for formatting a single value.

const n = 1234567.891;

// Always name the locale: with no argument, the output
// depends on the machine the code runs on
console.log(n.toLocaleString('en-US'));
console.log((9876543210).toLocaleString('en-US'));
console.log((-42000).toLocaleString('en-US'));

// By default it keeps at most 3 decimals, rounding the rest
console.log((0.123456).toLocaleString('en-US'));
console.log((1000.5).toLocaleString('en-US'));

Prints 1,234,567.891, 9,876,543,210 and -42,000, then 0.123 and 1,000.5. Two defaults are worth knowing: at most three decimals are kept (the rest are rounded away), and none are added, so 1000.5 is not padded to 1,000.50. Section 2 fixes both. Leaving out the locale, as in n.toLocaleString(), uses the default locale of the runtime (the browser's language or the server's OS settings), so the same line prints 1.234.567,891 for a user in Germany. That is right for text shown to that user and wrong for anything stored, logged or tested.

2A reusable Intl.NumberFormat (and fixed decimals)

new Intl.NumberFormat(locale, options) does the locale and option lookup once and gives you a formatter whose format(n) method you can call as often as you like. The spec has toLocaleString build a new formatter on every call, so in a loop over a table of rows the formatter is the better choice. The same options work on both. To always show a set number of decimals, set minimumFractionDigits and maximumFractionDigits to the same value.

// Build the formatter once, then reuse it: much cheaper
// than toLocaleString inside a loop
const fmt = new Intl.NumberFormat('en-US');
for (const n of [999, 1000, 25000.5, 1234567]) {
  console.log(fmt.format(n));
}

// Fixed decimals: always exactly 2 digits after the point
const twoDp = new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
console.log(twoDp.format(1234.5));
console.log(twoDp.format(1234.567));
console.log(twoDp.format(7));

// toFixed pads the decimals but adds no separators
console.log((1234.5).toFixed(2));

The loop prints 999, 1,000, 25,000.5 and 1,234,567. The two-decimal formatter prints 1,234.50, 1,234.57 and 7.00: it pads short values and rounds long ones. The last line, 1234.50, is why toFixed(2) is not the answer here: it fixes the decimals but never adds separators. If you only want to limit the decimals, set just maximumFractionDigits.

3Format numbers as currency

Add style: 'currency' and an ISO 4217 currency code, and Intl.NumberFormat picks the symbol, where it goes, how negatives look and how many decimals the currency uses. The two settings are independent: the locale decides the layout (separators, symbol position), and the currency decides the symbol and the number of minor-unit digits. currency is required with this style; there is no default.

const usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
console.log(usd.format(1234567.891));
console.log(usd.format(-5.5));

// The locale decides the layout; the currency decides the symbol
const eur = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
console.log(eur.format(1234567.891));

// Yen has no minor unit, so there are no decimals
const jpy = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'JPY' });
console.log(jpy.format(1234567.891));

// Show the ISO code instead of the symbol
const code = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'code',
});
console.log(code.format(1234.5));

// The space before € is a no-break space (U+00A0), not a regular one
console.log(eur.format(5).includes('\u00A0'));

Prints $1,234,567.89 and -$5.50 for US dollars, then 1.234.567,89 € for euros in German layout, ¥1,234,568 for yen (zero decimals, so it rounds to a whole yen), and EUR 1,234.50 with the code instead of the symbol. The final true is the thing that trips up tests: the gap between number and symbol is a no-break space (U+00A0), so comparing against a string typed with a normal space fails. Store money as integer cents or a decimal string and format it only for display.

4Other locales' separators

"Commas" is an English convention. Germany swaps the roles of comma and dot, France groups with a space, Switzerland with an apostrophe, and India groups the first three digits and then pairs (lakh and crore). You don't need to know any of that: pass the user's locale and the formatter applies its rules.

const n = 1234567.891;

for (const locale of ['en-US', 'de-DE', 'fr-FR', 'de-CH', 'en-IN']) {
  console.log(locale.padEnd(6), n.toLocaleString(locale));
}

// fr-FR groups with a narrow no-break space (U+202F)
const fr = n.toLocaleString('fr-FR');
console.log([...fr].filter((ch) => ch === '\u202F').length);

// en-IN uses lakh/crore grouping: 3 digits, then pairs
console.log((123456789).toLocaleString('en-IN'));

// Turn grouping off entirely
console.log(n.toLocaleString('en-US', { useGrouping: false }));

The loop prints 1,234,567.891 (en-US), 1.234.567,891 (de-DE), 1 234 567,891 (fr-FR), 1'234'567.891 (de-CH) and 12,34,567.891 (en-IN). The 2 confirms that French groups with a narrow no-break space (U+202F), not a regular space. The en-IN line after it shows the lakh pattern more clearly: 12,34,56,789. With useGrouping: false you get 1234567.891, the locale's decimal character without any group separators.

5Compact notation (1.2K) and BigInt

For follower counts and dashboards, notation: 'compact' abbreviates large numbers the way the locale does (K, M, B in English). At the other end, a Number is only exact up to Number.MAX_SAFE_INTEGER (about 9 quadrillion). Past that, keep the value as a BigInt, which has its own toLocaleString, or as a decimal string, which format() accepts directly.

// Compact notation: 1.2K, 3.4M, 5.6B
const compact = new Intl.NumberFormat('en-US', { notation: 'compact' });
for (const n of [999, 1234, 56789, 3400000, 5600000000]) {
  console.log(compact.format(n));
}

const long = new Intl.NumberFormat('en-US', {
  notation: 'compact',
  compactDisplay: 'long',
});
console.log(long.format(3400000));

// More precision than the default
const precise = new Intl.NumberFormat('en-US', {
  notation: 'compact',
  maximumFractionDigits: 1,
});
console.log(precise.format(56789));

// BigInt: exact past Number.MAX_SAFE_INTEGER
const big = 12345678901234567890n;
console.log(big.toLocaleString('en-US'));
console.log(Number(big).toLocaleString('en-US')); // a Number loses the last digits

// format() also takes a decimal string and keeps it exact
console.log(new Intl.NumberFormat('en-US').format('98765432109876543210.25'));

Compact prints 999, 1.2K, 57K, 3.4M and 5.6B, then 3.4 million in the long form. It rounds hard by default (56,789 becomes 57K); maximumFractionDigits: 1 gives 56.8K. The BigInt prints exactly as 12,345,678,901,234,567,890, while the same value converted to a Number prints 12,345,678,901,234,567,000: the last digits were lost in the conversion, not in the formatting. The decimal string comes out whole as 98,765,432,109,876,543,210.25.

6The regex fallback (and its limits)

Before Intl was everywhere, the standard answer was a regular expression that inserts a comma at every position followed by a multiple of three digits. It still works for plain integers and it only ever produces US-style commas. It is worth recognising in old code, and worth knowing where it breaks before you copy it.

// Insert a comma before every group of 3 digits that ends
// at a non-digit (or the end of the string)
function addCommas(n) {
  return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

console.log(addCommas(1234567));
console.log(addCommas(-9876543));

// Limit 1: it groups the decimals too
console.log(addCommas(1234.5678));

// Fix: only touch the integer part
function addCommasSafe(n) {
  const [int, frac] = String(n).split('.');
  const grouped = int.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return frac === undefined ? grouped : grouped + '.' + frac;
}
console.log(addCommasSafe(1234.5678));

// Limit 2: String() switches to exponent notation at 1e21
console.log(addCommasSafe(1e21));
console.log((1e21).toLocaleString('en-US'));

Integers work: 1,234,567 and -9,876,543. But the lookahead can't tell the integer part from the fraction, so 1234.5678 becomes 1,234.5,678. Splitting on the dot first gives 1,234.5678. The second limit is in String(n) itself: from 1e21 upward it returns exponent notation, so the regex sees 1e+21 and has nothing to group, while toLocaleString prints 1,000,000,000,000,000,000,000. There is also no rounding, no currency and no other locale. Use it only where Intl is genuinely unavailable.

7Which should you use?