Format a number to percentage in JavaScript

In this tutorial, we will learn how to format a number to a percentage in Javascript.

In JavaScript, we have only numeric data type that holds both the integer as well the floating values. To convert the number to percentage we have to do manual calculations.

Thanks to the ES6, there are now new methods available that we can use to convert the number to a percentage.

Using Intl.NumberFormat()

Intl.NumberFormat() is a multi-purpose method that we can use to format numbers to different types such as currency, percentage, significant digits, etc.

function percentageFormatter(num) {
  return new Intl.NumberFormat('default', {
    style: 'percent',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(num / 100);
}

console.log(percentageFormatter(18.75));
// 18.75%

As this works as a currency format, the first parameter that this method takes is a locale ‘en-us’ for example. If the value is set as ‘default’ it will pick the default locale from the browser.

The style values decide the output, if it is currency it will use the currency symbol depending upon the locale.

minimumFractionDigits sets the minimum number of fraction or decimal digits and maximumFractionDigits sets the maximum count of decimal digits allowed.

If the minimumFractionDigits and maximumFractionDigits is set to zero, it will round off (ceil to) the integer value as a percentage.

function percentageFormatter(num) {
  return new Intl.NumberFormat('default', {
    style: 'percent',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(num / 100);
}

console.log(percentageFormatter(18.75));
// 19%

At the end there is format(num / 100) method that is used to convert an integer to floating value. If you are passing a floating value to format as a percentage, do not divide it by 100.

function percentageFormatter(num) {
  return new Intl.NumberFormat('default', {
    style: 'percent',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(num);
}

console.log(percentageFormatter(0.1875));
// 18.75%

Using parseFloat() with toFixed()

Alternatively, we can use the parseFloat() method along with the toFixed() to format a number to the percentage. Though it is not better that Intl.NumberFormat(), but it is simpler to use.

function percentageFormatter(num) {
  return `${parseFloat(num).toFixed(2)}%`;
}

console.log(percentageFormatter(18.75));
//18.75%

console.log(percentageFormatter(18.7));
//18.70%

console.log(percentageFormatter(18));
//18.00%

toFixed() keeps the decimal digits fixed to the specified length and parseFloat() converts the integer to a floating value. Combining them both and appending them with a % character at the end does the work.

For formatting a floating value to the percentage, we will have to multiply the input number by hundreds.

function percentageFormatter(num) {
  return `${parseFloat(num * 100).toFixed(2)}%`;
}

console.log(percentageFormatter(0.1875));
// "18.75%"

console.log(percentageFormatter(0.187));
//"18.70%"

console.log(percentageFormatter(0.18));
// "18.00%"