Skip to main content

How to Format a Number as a Percentage in JavaScript

Displaying a number as a percentage is a very common formatting requirement, whether you are showing statistical data, user progress, or discounts. The task involves not only multiplying a decimal number by 100 but also appending the percent sign (%) and often formatting the number of decimal places. The modern and most robust way to do this is with the Intl.NumberFormat API.

This guide will teach you how to use Intl.NumberFormat to correctly and flexibly format numbers as percentages. We will also cover the classic manual approach to give you a full understanding of the process.

The Core Concept: Decimal vs. Percentage​

It is essential to understand the distinction between a number's mathematical value and its percentage representation.

  • A decimal (e.g., 0.75) is the mathematical representation.
  • A percentage (e.g., 75%) is the display representation.

The Intl.NumberFormat API handles this conversion for you automatically.

The Intl (Internationalization) API is the standard, built-in tool for locale-sensitive number and date formatting. It is the best choice because it handles rounding, decimal places, and the percent sign for you.

Logic: you create a NumberFormat object with { style: 'percent' } and then use its .format() method to convert your number.

You have a decimal number and need to display it as a percentage string.

// Problem: How to display this as "75.5%"?
const myNumber = 0.755;

Solution:

// The number to format (as a decimal)
const myNumber = 0.755;

// 1. Create a percentage formatter.
const formatter = new Intl.NumberFormat('en-US', {
  style: 'percent',
});

// 2. Format the number.
const formattedPercent = formatter.format(myNumber);

console.log(formattedPercent); 
// Output: 76% (defaults to no decimal places, rounds up)
note

This is the recommended best practice because it is powerful, declarative, and locale-aware.

How to Control the Number of Decimal Places​

A major advantage of Intl.NumberFormat is its ability to precisely control the number of fraction digits in the output.

Solution: you can set minimumFractionDigits and maximumFractionDigits in the options object.

const myNumber = 0.7551;

// Create a formatter that always shows 2 decimal places.
const formatter = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

const formattedPercent = formatter.format(myNumber);

console.log(formattedPercent); 
// Output: 75.51%
note

This gives you complete and reliable control over the final formatted string.

The Manual Method: Multiplication and .toFixed()​

While not recommended for user-facing applications, you can always format a percentage manually.

Logic:

  1. Multiply your decimal number by 100.
  2. Use the .toFixed() method to control the number of decimal places.
  3. Manually append the % sign.

Solution:

function formatAsPercent(num) {
  const percentValue = num * 100;
  // .toFixed(2) rounds to 2 decimal places and returns a string.
  return `${percentValue.toFixed(2)}%`;
}

// Example Usage:
console.log(formatAsPercent(0.7551)); // Output: 75.51%
console.log(formatAsPercent(0.5));    // Output: 50.00%
note

The main drawbacks of this method are that it is more verbose and is not locale-aware (e.g., it will always use a period . as the decimal separator, which is incorrect for many regions).

Conclusion​

For formatting a number as a percentage, the modern Intl API provides a superior solution.

  • The Intl.NumberFormat API with the { style: 'percent' } option is the recommended best practice. It is the most powerful, flexible, and correct solution for any user-facing application.
  • Use the minimumFractionDigits and maximumFractionDigits options to precisely control the number of decimal places in the output.
  • The manual method using multiplication and .toFixed() is a functional alternative for simple, non-localized needs but should generally be avoided in favor of the Intl API.

Table of Contents