Format a Number as a Percent using JavaScript

avatar

Borislav Hadzhiev

Thu Dec 23 20212 min read

banner

Photo by Jonatan Pie

Format a Number as a Percent using JavaScript #

Use the Intl.NumberFormat() constructor to format a number as a percent value. The constructor creates and returns an object, on which we are able to call the format() method to format a number according to the provided formatting options object.

index.js
function formatAsPercent(num) { return new Intl.NumberFormat('default', { style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2, }).format(num / 100); } console.log(formatAsPercent(35.3)); // 👉️ "35.30%" console.log(formatAsPercent(100)); // 👉️ "100.00%" console.log(formatAsPercent(25.5)); // 👉️ "25.50%"

We created a reusable function which formats a number as a percent.

We used the Intl.NumberFormat() constructor to get an Intl.NumberFormat object.

In the call to the format method, we divided the provided number by 100 to directly format the passed in value as percent.

We passed the following 2 parameters to the Intl.NumberFormat constructor:

  1. The locale string, e.g. default or en-US.
  2. A formatting options object.
In the options object, we set the style property to percent and specified that we want the formatted value to have a minimum and maximum 2 fraction digits.

You might need to tweak these options depending on your use case, however note that if fraction digits are set to 0, the formatted value will be rounded up or down.

index.js
function formatAsPercent(num) { return new Intl.NumberFormat('default', { style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 0, }).format(num / 100); } console.log(formatAsPercent(25.49)); // 👉️ "25%" console.log(formatAsPercent(25.5)); // 👉️ "26%"

In this example, we set the fraction digits to 0. When the function is called with a floating number with a decimal value of .49 or less, it gets rounded down, otherwise the value is rounded up.

Alternatively, you can use the parseFloat function and toFixed method.

To format a number as a percent:

  1. Pass the number as a parameter to the parseFloat() function.
  2. Call the toFixed() method on the result.
  3. Append a percent sign % to the result.
index.js
function formatAsPercent(num) { return `${parseFloat(num).toFixed(2)}%`; } console.log(formatAsPercent(25.49)); // 👉️ 25.49% console.log(formatAsPercent(25.5)); // 👉️ 25.50% console.log(formatAsPercent(25)); // 👉️ 25.00%

This approach is not equivalent to using the Intl.NumberFormat() constructor and the format() method, however is a bit simpler.

The parseFloat function parses the provided value to a floating point number and the Number.toFixed method formats the number using fixed-point notation.

index.js
console.log((5).toFixed(3)); // 👉️ "5.000" console.log((5).toFixed(2)); // 👉️ "5.00" console.log((5).toFixed(1)); // 👉️ "5.0"

The final step is to append a percent sign to the value to format the number as a percent.

Use the search field on my Home Page to filter through my more than 1,000 articles.