Fortunately, there are already many functions that can format a number as a percent in JavaScript. We will discover how to do it using two different ways. Each approach is straightforward, so you can use whichever you want.
How to format a number as a percent in JavaScript
Using toLocaleString()
Syntax:
toLocaleString(locales, options)
Parameter:
- locales: The local settings, in this case, can be undefined
- options: The customize display options, such as percent style.
Basically, a number can be formatted as a percent only when it is less than one. Because if it is 1, it means 100%. If you have a number to which you want to add a percent symbol, such as the number 25 to 25%, you must divide 25 by 100 in order to use this method:
// Make number to be less than 1
let num = 25;
let myNum = 25 / 100;
// Format a number as a percent, no decimal point
let res1 = myNum.toLocaleString("en-US", {
style: "percent",
});
console.log(res1);
// Format a number as a percent, 2-digit decimal point
let res2 = myNum.toLocaleString("en-US", {
style: "percent",
minimumFractionDigits: 2,
});
console.log(res2);
// Format a number as a percent, 2-digit decimal comma
let res3 = myNum.toLocaleString("vi-VN", {
style: "percent",
minimumFractionDigits: 2,
});
console.log(res3);Output:
25%
25.00%
25,00%However, if you have a number that is already smaller than 1, for example, 0.5, and you want to convert it to 50% (format it as a percent), then you just don’t divide it by 100:
// Make number to be less than 1
let myNum = 0.5;
// Format a number as a percent, 2-digit decimal point
let res = myNum.toLocaleString("en-US", {
style: "percent",
minimumFractionDigits: 2,
});
console.log(res);Output:
50.00%As you can see, choosing which example depends on what kind of your number is (less than 1 or not). However, if you cannot use the above methods, maybe your browser does not support them. You can use the next solution instead.
Using Intl.NumberFormat()
The syntax and the usage of this function are familiar with the toLocaleString()
Syntax:
Intl.NumberFormat(locales,options)
Parameter:
- locales: The local settings can be undefined.
- options: The customize display options, such as percent style.
This is not a method that you can call on a number; instead, it is an object that is used to support formats. Therefore, you need to declare the format and then pass the number you want to format through the method format() of this type:
// Make number to be less than 1
let myNum = 0.5;
// Format a number as a percent, 2 digit decimal part
let res = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
}).format(myNum);
console.log(res);Output:
50.00%Have you recognized the differences between the above example and the last one of the previous methods? In this example, we have to create a NumberFormat object and then call the method format() with an argument that is the number we want to format on this object to get the expected result.
Summary
We have found out how to format a number as a percent in JavaScript using two different methods. In spite of many ways to do this, we still recommend you to use the Intl.NumberFormat() method, as it is supported by most browsers.
Maybe you are interested:
- Round a Number to 2 Decimal Places in JavaScript
- Check if a Number is a Negative Integer in JavaScript
- How to Pad a number with Leading Zeros in JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R
