JavaScript Format Currency

We will understand the JavaScript Format Currency in this article.

What is currency?

It is the type of money which is utilized by a particular country that means each country has a specific currency which consists of different patterns. There are different methods that are utilized to display a monetary values.

Format a number as a currency

When a number is formatted then it becomes easy for people to understand what country currency it is. For example, India follows the Indian Numbering System to represent INR, the USA follows the International Numbering System to represent USD, etc. The number 500000 according to Indian Numbering System is written as ₹5,00,000.00 and the same number according to Indian Numbering System is written as $500,000.00. In JavaScript, we can format a number according to the currency of different countries utilizing various methods.

Methods to format a number as currency

Following are the methods that are used to format a number as currency:

Utilizing the internationalization API (ECMAScript 402)
Utilizing the Intl.NumberFormat() with toLocaleString()
Utilizing concatenation method
Utilizing template literals and regular expressions

Method-1: Utilizing the Internationalization API (ECMAScript 402) to format numbers as currency

ECMAScript 402 is also called the internationalization API which supports language-sensitive operations. This API contains the Intl.NumberFormat object which permits us to format numbers as strings.

Syntax:

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

The Intl.NumberFormat() is the method which consists of two arguments which are given below:

en-IN- It is the locale, i.e., the area where a particular language is spoken.

{style: 'currency', currency: 'target currency'}- This argument contains two attributes which are described below:

style: 'currency'- It is the style attribute that specifies the currency.

currency: 'target currency'- It is the currency attribute that specifies the target currency.

Let us format a number utilizing the internationalization API in the following demonstration.

Code:

const number = 2056201.52;

let dollarUS = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
});

let rupeeIndian = Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "INR",
});

let euroGerman = Intl.NumberFormat("de-DE", {
    style: "currency",
    currency: "EUR",
});

console.log("Dollars: " + dollarUS.format(number));

console.log("Rupees: " + rupeeIndian.format(number));

console.log("Euros: " + euroGerman.format(number));

Output:

Here is the output in which we can witness that the number is formatted according to Indian currency, USA currency, and European currency.

Method-2: Utilizing the Intl.NumberFormat() with toLocaleString() to format numbers as currency

The simplest method utilized to format a number is Intl.NumberFormat() with toLocaleString().

Let us format a number as currency utilizing Intl.NumberFormat() with toLocaleString() in the following demo.

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Formatting a number as currency utilizing the Intl.NumberFormat() with toLocaleString()</title>
</head>

<body>
<script>
	const cash = 1951100.326;
	let num1 = Intl.NumberFormat('en-US');
	let num2 = Intl.NumberFormat('en-IN');
	console.log("US Locale sample: " + num1.format(cash));
	console.log("Indian Locale sample: " + num2.format(cash));
	document.write("US Locale sample: $" + num1.format(cash));
	document.write("<br>Indian Locale sample: Rs." + num2.format(cash));
</script>
</body>
</html>

Output:

Here is the output in which we can witness that the number is formatted according to Indian currency and USA currency.

Method-3: Utilizing the concatenation method to format numbers as currency() to format a number as currency

This method is utilized to concatenate a number into a currency string which is why it is called the concatenation method. This method merges two or more strings together.

Let us format a number utilizing the concatenation method in the following demonstration.

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Format a number as currency in JavaScript utilizing the concatenation method</title>
</head>

<body>
<script>
	const num = 24654645.15465; 
	const outcome = '$' + num.toFixed(2); 
	console.log("US Locale sample: " + outcome);
	document.write("US Locale sample: " + outcome);
</script>
</body>
</html>

Output:

Here is the output in which we can witness that the number is formatted as currency according to USA currency.

Method-4: Utilizing Template Literals and Regular Expressions() to format a number as currency

We can format a number with the help of template literals and regular expressions.

Let us have a look at the following demonstration to format a number utilizing template literals and regular expressions.

Code:

const formatCurrency = (num, symbol = '$') => {
  const formattedNum = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

  return `${symbol}${formattedNum}`;
};

const num = 56549465.545;
console.log(formatCurrency(num));

Output:

Here is the output where we can witness that the number is formatted to USA currency utilizing template literals and regular expressions.

Conclusion:

We have understood the JavaScript format currency in this article. Points to remember are given below:

Currency is the money which is different for every country and has a different format.
There are various methods to format a number as currency, which are given below:
- Utilizing the internationalization API (ECMAScript 402)
- Utilizing the Intl.NumberFormat() with toLocaleString()
- Utilizing concatenation method
- Utilizing template literals and regular expressions

Next TopicJavaScript pass

← prev next →