Formatting percentage values with JavaScript Intl

🕑 1 minute read

Javascript contains an Internationalization API that you can use to format numbers to a user's locale. Setting the style to percent is all that is needed.

Intl.NumberFormat("en-GB", { style: "percent"}).format(1.2345); // => "123%"

Note: A value of 1 will return 100% because 1x anything is 100%!

1 * 100 = 100;    // 100% 
1.5 * 100 = 150;  // 150%   

To specify the decimal places use minimumFractionDigits and maximumFractionDigits to give you more visual control.

Intl.NumberFormat("en-GB", { style: "percent", 
    minimumFractionDigits: 1,
    maximumFractionDigits: 2
}).format(123.45); // => "123.45%"

This can all be wrapped in a function to save repetition and keep consistency across your app.

const formatPercentage = (value, locale = "en-GB") => {
    return Intl.NumberFormat(locale, {
        style: "percent",
        minimumFractionDigits: 1,
        maximumFractionDigits: 2
    }).format(value);
};

formatPercentage(1); 		// => "100.0%"
formatPercentage(0.1); 		// => "10.0%"
formatPercentage(0.13); 	// => "13.0%"
formatPercentage(0.135); 	// => "13.5%"
formatPercentage(0.1357); 	// => "13.57%"
formatPercentage(0.13579); 	// => "13.58%"