Software developers often use different types of data types while programming. Some of them include numbers, strings, objects, etc. The number data type is one of Javascript’s most widely used data types. It is beneficial, especially in mathematical calculations and related stuff. In this article, we will learn how to format numbers in javascript.
Unlike Python, Java, etc., Javascript does not have a data type like float, integer, double, etc.. For example, the number data type in Javascript is double, which is used in python. It is a number with decimal points.
Why do we format a number in JavaScript?
We often get the answer in a long decimal format when dealing with long integers. However, this makes it inconvenient for calculation purposes. Also, it is cumbersome to work with such huge numbers. So we may need to use the decimal precision number format.
We often face situations where we may want a less precise answer than the output. For example, we may want to round off the Number to a precision of 3,4, etc. For example, we may want to convert the number 3.674565 to 3.66, i.e., up to a three-digit precision level.
Yet, another time we may need to convert one format of the Number to another, keeping the value precisely the same. For example, we may want to convert the number 123455677 to 123,455,677, which is followed in the USA.
Sometimes we may also want to convert the Number into some currency value. For example, we are likely converting the number 10 into $10. To perform all such tasks, we need the concept of string formatting.
JavaScript format number
To format a number in JavaScript, use the Number.toFixed() method. The Number.toFixed() is a built-in JavaScript function that converts a number to a specified number of decimal places.
Parameter
Several digits to get the precision value.
Return value
Number with the specified precision.
Example
let num =9867.4435664;
console.log(num.toFixed(5));
Output
9867.44357Explanation
In the above code, we first created a variable named num using the let keyword. Then, we printed the Number round off to 5-digit precision using the toFixed() function. For example, we know that the round-off value of 0.4435664 to 5 digit place is 0.44357; hence the answer of 5-digit precision for 9867.4435664 is 9867.44357.
JavaScript Number Format with Comma
To format a number with a comma in JavaScript, use the toLocalString() function. The toLocalString() is a built-in JavaScript function that formats the Number with commas.
We can convert any number into corresponding USA dollar number formatting or the Indian number formatting system etc. The USA number formatting is done in millions, billions, etc.; hence, they are separated by one comma after every three numbers.
The Indian number formatting system has thousands, hundreds, etc., so three commas do the first separation, and 2 commas do the second.
Parameter
The formatting string. This can be from the UK, USA, Indian format, etc. There are 2 optional arguments: locale and options.
Locals can be any of the following:
- en-US
- en-GB
- hi-IN
- etc
The default value of locale is en-US.
Return value
Returns a string of data that appears as comma-separated digits.
Example
let value = 954536.45;
// US system en-US
console.log(value.toLocaleString('en-US'));
// UK system en-GB
console.log(value.toLocaleString('en-GB'));
// India system hi-IN
console.log(value.toLocaleString('hi-IN'));Output
954,536.45
954,536.45
9,54,536.45JavaScript Number Format Currency
To format a number as a currency string in JavaScript, use the Intl.NumberFormat() function. The Intl.NumberFormat() is a built-in JavaScript constructor that creates Intl.NumberFormat objects that enable language-sensitive number formatting.
Javascript also has an in-built function that can convert the numbers to currency format. The currency can be in terms of dollars, rupees, pounds, etc., depending upon the specified arguments.
Syntax
Intl.NumberFormat()Parameter
It accepts two optional arguments as the parameter. First is the local argument specifying the place for the currency where they are used, and the second is the style of the currency.
Some currency parameters which can be used are as follows:
- en-US
- en-GB
- hi-IN
Return value
Returns the Number in the form of the currency.
Example 1
let value = 954536.45;
// US system en-US
let curr1 = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
console.log(curr1);
// India system hi-IN
let curr2 = new Intl.NumberFormat('hi-IN', { style: 'currency', currency: 'INR' }).format(value);
console.log(curr2);
// UK system en-GB
let curr3 = new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(value);
console.log(curr3);Output
$954,536.45
₹9,54,536.45
£954,536.45Explanation
In the above code, we have created a variable named value and stored the variable’s value too. Then we created another variable named curr1 using the let keyword.
We used the NumberFormat() function, where we specified the USA formatting style and currency from the USA dollar. We then stored the formatted Number in the variable. We then printed the values of the variable curr1 in the console.
The same explanation goes for the curr2(Indian Currency – INR) and curr3(GB Currency – GBP) variables.
You can also use the toLocaleString() method in the above example to achieve the same output.
Example 2
let value = 954536.45;
// US system en-US
let curr1 = value.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
console.log(curr1);
// India system hi-IN
let curr2 = value.toLocaleString('hi-IN', { style: 'currency', currency: 'INR' })
console.log(curr2);
// UK system en-GB
let curr3 = value.toLocaleString('en-GB', { style: 'currency', currency: 'GBP' })
console.log(curr3);Output
$954,536.45
₹9,54,536.45
£954,536.45Conclusion
In this article, we have learned about string formatting. Software developers may often need to use such formatting to perform different types of logic. Unfortunately, especially in cryptocurrency, stock market programming, etc., these formattings are excessively used because the consumers prefer the amount to be displayed in a local format rather than a simple number.
That’s it for this tutorial.
Related posts
How to Get Time in 12-Hour Format in Javascript
How to Convert Number to Currency Format in JavaScript
How to Format Dates in JavaScript
Niva Shah is a Software Engineer with over eight years of experience. She has developed a strong foundation in computer science principles and a passion for problem-solving.