You are currently viewing 2 Ways to Format Numbers as Currency in JavaScript

2 Ways to Format Numbers as Currency in JavaScript

JavaScript Format Number as Currency

In this article, we will see how to format number as currency in JavaScript.

What is format number as currency?

To format a number as a currency, we need to use a currency symbol (eg $, €, ¥) and separate the digits into groups with commas. The number may also be rounded to a certain number of decimal places, depending on the currency. It makes it easy to display monetary values ​​in a standardized and easily-readable format.

For example, If we format the number 15000 as currency in US dollars might result in the string $15,000. Similarly, we format the number 50000 as currency in Indian rupees might result in the string

50,000.

Why should we format numbers as currency?

  • Localization: Different countries have different currency formats, for example, the US has dollars, India has rupees, China has yuan, etc. So, formatting numbers as currency allows for the localization of currency symbols and decimal separators based on the user’s locale.
  • Consistency: When dealing with financial data, it is important to have a consistent format for displaying currency values across the application. By formatting numbers as currency, currency values ​​should be displayed consistently throughout the application. This makes it easy to compare values.
  • Accuracy: By formatting numbers as currency, it ensures that values are displayed accurately, with the correct number of decimal places.

Several ways to format numbers as currency in JavaScript

These are the easiest methods to format numbers as currency:

1. Using the toLocaleString() method:

Here we use the toLocaleString() method to format the numbers as currency

let number = 15000 ;
console.log(number.toLocaleString('en-US', {style: 'currency', currency: 'USD'}));

In this code:

  • We have initialized the variable ‘number’ to ‘15000’.
  • We called the toLocaleString() method on the ‘number’ variable. We passed two arguments to the toLocaleString() : the locale string ‘en-US’ and an options object with style: ‘currency’ and currency: ‘USD’.
  • The argument ‘en-US’ specifies the locale for English (United States). And the argument {style: ‘currency’, currency: ‘USD’} specifies the formatting options for the currency.
  • Finally, we logged the returned value of ‘toLocaleString()’ method.
READ ALSO  Local vs Global Scope of Variables in JavaScript

So, the output of this code would be: $15,000

2. Intl.NumberFormat() constructor

This method creates an object for formatting numbers with options for the currency, locale, and other formatting settings.

let number = 1234.56;
let formatter = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'});
console.log(formatter.format(number));

In this code:

  • We use the ‘Intl.NumberFormat()’ constructor and passed two arguments the locale string ‘en-US’ and an options object with style: ‘currency’ and currency: ‘USD’.
  • And we assigned the variable ‘formatter’ to returned value of ‘Intl.NumberFormat()’ constructor.
  • Then we called the format() method on the formatter object and pass in the number variable as an argument.
  • Finally, we logged the return value of the format() method.
  • So, the output of this code would be: $1,234.56

Leave a Reply