Formatting percentage values with JavaScript Intl

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%"