Format Number as Currency String in JavaScript?

Every country has specific currencies, including various patterns or methods to display monetary values. When we correctly represent a number, it becomes easier to read and pretty much understandable for readers.

So, the best practice is to go through the standardized norm instead of hardcode it. This article will discuss how to format a number as a currency string in Javascript.

Method 1: Using the Intl.NumberFormat() with toLocaleString() to format numbers as currency:

In JavaScript, the most prevalent and the easiest method to format numbers as currency strings is using the Intl.NumberFormat() method. This method lets users format numbers operating custom locale parameters.

Syntax:

Intl.NumberFormat('en-US', {style: 'currency', currency: 'target currency'})
.format(monetary_value); 

Explanation:

Here, we have used the 'en-INR' and 'en-US' as the locale. A locale is a set of parameters that determine anything on a user's computer that is region specific. Users can go through the list of all the locales from here. When users choose a different locale and currency, it will format their monetary value accordingly.

The Intl.NumberFormat() constructor has two arguments. The first is a locale string, with which users can specify the locale they want to format, and users can use the second to set the options they want to apply while formatting.

The style, currency, useGrouping, and maximumSignificantDigits are the list of second arguments that specifies the formatting style that users want.

Code Snippet:

    const price = 1720000.396;
	const resultd = (price).toLocaleString('en-US', { 
		style: 'currency', 
		currency: 'USD' 
	});
	const resultinr = (price).toLocaleString('en-IN', { 
		style: 'currency', 
		currency: 'INR' 
	}); 
	console.log("US Locale sample: " + resultd);
	document.write("US Locale sample: " + resultd);
	console.log("Indian Locale sample: " + resultinr);
	document.write("<br>Indian Locale sample: " + resultinr);

Output:

Run Code

Explanation:

In the above code snippet, we have used the Intl.NumberFormat with the .toLocaleString() method that returns a new string with the language-sensitive representation of the input number. The Intl.NumberFormat method enables language-sensitive number formatting in JavaScript.

It converts the input number into en-US and en-ID. Users can also use the .toLocaleString() method separately to format a number as a currency string in JavaScript.

Code Snippet:

const demo1 =  (212423727).toLocaleString('en-US', {
    style: 'currency',
    currency: 'USD'
});
console.log(demo1);

Explanation:

The .toLocaleString() method is returning a string with a language-sensitive representation and creates a currency format output. The .toLocaleString() does not support locales in its older embodiments (pre-Intl).

It uses the system locale. So, when a user is debugging the old browsers, they must be sure they are using the correct version. MDN recommends scanning for the existence of Intl.

Output:

Run Code

Method 2: Using concatenation to format numbers as currency:

This technique concatenates a number into a currency string in JavaScript called the concatenation method. Using this technique, users can merge two or more strings.

The method does not bring differences to the actual string but creates a new string. This technique is as simple as adding a dollar symbol with a number as string input.

Code Snippet:

const number = 2875118.123456;
const result = '$ ' + number.toFixed(2);
console.log(result);

Output:

Run Code

Explanation:

In the above code example, we have used the toFixed(2) method to round the number up to two decimal places. Using a variable, we can add any number we want to convert into a currency string. In the above code, we have used “number” as the variable that stores a long floating-point number.

Then, we used the '$' to the number to convert it into the required currency string.

Note:

The implementation of both Intl.NumberFormat() and toLocaleString() are the same for a single number. But if users use a large number of number input to format into currency format, it is preferable to use Intl.NumberFormat, which is ~70 times faster. Thus, it is usually reasonable to use Intl.NumberFormat.

Method 3: Using RegEx to format numbers as currency:

A regular expression (RegEx) is a series of characters that comprises a search pattern. In other words, the Regular Expression (RegEx) in JavaScript is an object that specifies the series of characters used for representing a search pattern.

Code Snippet:

const demo = 7285141.123456.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
console.warn('$ ' + demo);

Output:

Run Code

Explanation:

Here, in the code snippet, we used the replace() method with the RegEx pattern that returns the number input with a currency string. Also, we have used the toFixed(2) method to round up the number to two decimal places.

Conclusion:

In this tutorial, we have learned how to format a number as a currency string using JavaScript methods. We have used the Intl.NumberFormat(), concatenation, toLocaleString(), and RegEx methods to do this, with the required list of locale and different other settings users can utilize to customize during the formatting process.