DevToolbox

Percent Formatting with Intl.NumberFormat

Format percentage values correctly for any locale using Intl.NumberFormat percent style. Learn about sign display, fraction digits, and locale-specific percent conventions.

Intl.NumberFormat

Detailed Explanation

Locale-Aware Percent Formatting

Percentage display varies by locale, particularly in the spacing between the number and the percent sign, decimal separators, and negative value representation.

Basic Percent Formatting

const ratio = 0.1234;

new Intl.NumberFormat('en-US', { style: 'percent' })
  .format(ratio);  // "12%"

new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
}).format(ratio);  // "12.34%"

new Intl.NumberFormat('fr-FR', {
  style: 'percent',
  minimumFractionDigits: 2,
}).format(ratio);  // "12,34 %"

new Intl.NumberFormat('tr-TR', {
  style: 'percent',
  minimumFractionDigits: 2,
}).format(ratio);  // "%12,34"

Key Observations

  1. Input is a ratio: Pass 0.12 for 12%, not 12. Intl.NumberFormat multiplies by 100 automatically.
  2. Space before %: French and many European locales insert a non-breaking space before the percent sign.
  3. Symbol position: Turkish places the percent sign before the number.
  4. Decimal separator: Follows the locale's number formatting rules.

Controlling Precision

new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 0,
  maximumFractionDigits: 2,
}).format(0.1);     // "10%"

new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 0,
  maximumFractionDigits: 2,
}).format(0.1234);  // "12.34%"

Sign Display for Changes

new Intl.NumberFormat('en-US', {
  style: 'percent',
  signDisplay: 'always',
}).format(0.05);  // "+5%"

new Intl.NumberFormat('en-US', {
  style: 'percent',
  signDisplay: 'exceptZero',
}).format(0);     // "0%"

The signDisplay option is useful for showing positive/negative changes in dashboards and reports.

Use Case

Percent formatting is common in analytics dashboards showing growth rates, e-commerce sites displaying discounts, financial applications showing interest rates, and progress indicators. A dashboard showing 'Revenue growth: +12.5%' needs to format that correctly for users in France ('+12,5 %') or Turkey ('%12,5'). Using the percent style ensures the formatting follows local conventions without manual string manipulation.

Try It — Locale String Tester

Open full tool →

Related Topics

Intl.NumberFormat Basics: Locale-Aware Number Formatting

Intl.NumberFormat

Currency Formatting by Locale with Intl.NumberFormat

Intl.NumberFormat

Unit Formatting with Intl.NumberFormat (Meters, Liters, Bytes)

Intl.NumberFormat

Compact Number Notation (1K, 1M, 1B) with Intl.NumberFormat

Intl.NumberFormat

Number Grouping Styles by Locale: Indian, Western, and East Asian

Intl.NumberFormat