How do you control whether to show thousands separators?

Introduction

When you format the number 123456, you might see "123,456" with a comma separating the thousands, or "123456" without any separator. The character that separates groups of digits is called a grouping separator, commonly known as a thousands separator in English-speaking regions.

Different contexts require different formatting. Financial reports typically show grouping separators to make large numbers easier to read. Technical displays like serial numbers, product codes, and ID numbers typically omit them to prevent confusion. The useGrouping option in Intl.NumberFormat controls whether these separators appear in formatted output.

This guide explains how to enable and disable grouping separators, how they vary across locales, and when to use each setting in your applications.

Disable grouping separators with useGrouping false

Set useGrouping to false to remove all grouping separators from formatted numbers.

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: false
});

formatter.format(123456);
// "123456"

formatter.format(1234567.89);
// "1234567.89"

The formatted output contains no commas or other grouping characters, regardless of how large the number is. The decimal separator remains because useGrouping only affects digit grouping, not decimal formatting.

This applies to all number styles, including currency and units.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: false
}).format(1234567.89);
// "$1234567.89"

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: false
}).format(50000);
// "50000 km"

The currency symbol and unit label appear normally, but the digits have no internal separators.

Enable grouping separators with useGrouping true

Set useGrouping to true to include grouping separators. This is the default behavior, so you only need to specify it explicitly when you want to be clear about your intent or when overriding a configuration.

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: true
});

formatter.format(123456);
// "123,456"

formatter.format(1234567.89);
// "1,234,567.89"

The formatter inserts commas every three digits, following English conventions. This makes large numbers easier to scan visually.

Since true is the default, these two formatters are equivalent.

new Intl.NumberFormat('en-US', { useGrouping: true });
new Intl.NumberFormat('en-US');

Both formatters include grouping separators in their output.

Understand how grouping varies across locales

Different locales use different characters for grouping and follow different grouping patterns. The useGrouping option controls whether grouping occurs, while the locale determines what character appears and where.

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(1234567);
// "1,234,567"

new Intl.NumberFormat('de-DE', {
  useGrouping: true
}).format(1234567);
// "1.234.567"

new Intl.NumberFormat('fr-FR', {
  useGrouping: true
}).format(1234567);
// "1 234 567"

English uses commas, German uses periods, and French uses spaces. All three are grouping separators, but they look different because they follow their locale's conventions.

Some locales use different grouping patterns. Indian numbering groups the first three digits, then groups every two digits after that.

new Intl.NumberFormat('en-IN', {
  useGrouping: true
}).format(1234567);
// "12,34,567"

The grouping separator appears after three digits from the right, then after every two digits, producing 12,34,567 instead of 1,234,567.

When you disable grouping with useGrouping: false, these locale-specific differences disappear because no separators appear at all.

new Intl.NumberFormat('en-IN', {
  useGrouping: false
}).format(1234567);
// "1234567"

Use string values for advanced grouping control

The useGrouping option accepts string values that provide finer control over when grouping separators appear. These values are part of the Intl.NumberFormat V3 specification and are supported in modern browsers.

The "always" value is equivalent to true and always displays grouping separators.

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(1234);
// "1,234"

The "auto" value follows the locale's preferences for grouping. Most locales prefer to show grouping separators, making "auto" similar to "always" in practice. This is the default value when notation is not "compact".

new Intl.NumberFormat('en-US', {
  useGrouping: 'auto'
}).format(1234);
// "1,234"

The "min2" value only shows grouping separators when there are at least two digits in the first group. For four-digit numbers, this means no separator appears.

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(1234);
// "1234"

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(12345);
// "12,345"

The number 1234 has only one digit in the first group (the 1), so no separator appears. The number 12345 has two digits in the first group (the 12), so the separator appears.

This behavior matches how some locales naturally format numbers. Spanish, for example, typically omits grouping separators for four-digit numbers.

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(1234);
// "1234"

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(12345);
// "12.345"

The "auto" value respects these locale preferences, while "always" overrides them.

new Intl.NumberFormat('es-ES', {
  useGrouping: 'always'
}).format(1234);
// "1.234"

Choose when to disable grouping separators

Disable grouping separators in contexts where the number represents a code, identifier, or technical value rather than a quantity.

Serial numbers and product codes should not have grouping separators.

const serialNumber = 1234567890;

new Intl.NumberFormat('en-US', {
  useGrouping: false
}).format(serialNumber);
// "1234567890"

This prevents confusion about whether the separator is part of the actual value. A user seeing 1,234,567,890 might wonder if the commas are meaningful or if they should type them when entering the number elsewhere.

ZIP codes, phone numbers (when formatted as plain numbers), and other fixed-format identifiers benefit from disabled grouping.

const zipCode = 90210;

new Intl.NumberFormat('en-US', {
  useGrouping: false,
  minimumIntegerDigits: 5
}).format(zipCode);
// "90210"

Technical displays showing raw values for debugging or logging should typically disable grouping to show the exact numeric representation.

console.log(`Processing ${
  new Intl.NumberFormat('en-US', {
    useGrouping: false
  }).format(bytesProcessed)
} bytes`);
// "Processing 1234567 bytes"

Form inputs for numeric values often disable grouping during editing to avoid confusion about whether the user should type the separators. The formatted display can show grouping after the user finishes entering the value.

Choose when to enable grouping separators

Enable grouping separators for numbers that represent quantities, measurements, or amounts that users need to read and understand quickly.

Financial amounts are easier to scan with grouping separators.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: true
}).format(1234567.89);
// "$1,234,567.89"

The separators help users quickly distinguish between $1,234,567 and $123,456 at a glance.

Statistical data, analytics dashboards, and reports displaying counts benefit from grouping.

const pageViews = 5432198;

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(pageViews);
// "5,432,198 views"

Large measurements become more readable with grouping.

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: true
}).format(384400);
// "384,400 km"

This distance (the approximate distance to the moon) is easier to read as 384,400 than as 384400.

Any context where the user needs to comprehend the magnitude of a number benefits from grouping separators. The separators create visual landmarks that help the brain process the digits in chunks.

Use min2 for cleaner four-digit displays

The "min2" value provides a cleaner look for numbers that might be four or five digits. Year numbers, for example, typically look better without separators.

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(2025);
// "2025"

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(2025);
// "2,025"

Most readers find 2025 more natural than 2,025 when referring to a year. The "min2" setting provides this behavior automatically.

Prices in certain ranges also benefit from this approach.

const price = 1299;

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(price);
// "$1299.00"

Some retailers prefer to display prices like $1299 without a comma to make them feel less expensive psychologically. Once prices exceed four digits, the separator appears.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(12999);
// "$12,999.00"

This gives you consistent behavior across your price range without manually checking the number's magnitude.

Understand how compact notation affects grouping

When using compact notation, the default useGrouping behavior changes to "min2" rather than "auto". This prevents unnecessary separators in compact formats.

new Intl.NumberFormat('en-US', {
  notation: 'compact'
}).format(1234);
// "1.2K"

new Intl.NumberFormat('en-US', {
  notation: 'compact',
  useGrouping: 'always'
}).format(1234);
// "1.2K"

Compact notation already abbreviates the number, so internal grouping separators would be redundant. The formatter handles this automatically, but you can override it if needed.

Check which grouping setting is active

The resolvedOptions() method shows what useGrouping value the formatter actually uses.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

formatter.resolvedOptions().useGrouping;
// "auto"

Even though the formatter was created without explicitly setting useGrouping, the resolved options show the default value of "auto".

const compactFormatter = new Intl.NumberFormat('en-US', {
  notation: 'compact'
});

compactFormatter.resolvedOptions().useGrouping;
// "min2"

The compact notation formatter defaults to "min2" instead of "auto", as shown in the resolved options.

This method helps debug unexpected grouping behavior by revealing the actual setting the formatter uses.