In this article, we will explore the concept of formatting currency in JavaScript.
What is currency?
Currency refers to the type of money that is employed by an individual nation, signifying that each country possesses its own distinct currency characterized by unique designs. Various techniques are employed to represent monetary values.
Format a number as a currency
Formatting a number helps individuals easily identify the currency associated with a particular country. For instance, India adopts the Indian Numbering System to denote INR, while the United States employs the International Numbering System for USD, among others. The numeral 500000, when expressed in the Indian Numbering System, is represented as ₹5,00,000.00; conversely, in the International Numbering System, it appears as $500,000.00. In JavaScript, there are several methods available that allow us to format numbers in accordance with the currency standards of different nations.
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, commonly referred to as the internationalization API, facilitates operations that are sensitive to various languages. Within this API, there exists the Intl.NumberFormat object, which enables the formatting of numbers into string representations.
Syntax:
Intl.NumberFormat('en-IN', {style: 'currency', currency: 'target currency'}) .format(monetary_value);
The method Intl.NumberFormat includes two parameters, which are outlined below:
en-IN refers to the locale, which denotes the region in which a specific language is utilized.
{style: 'currency', currency: 'target currency'} - This parameter encompasses two properties that are outlined as follows:
style: 'currency' - This attribute designates the format for displaying currency values.
currency: 'target currency' - This attribute denotes the currency that is intended to be the target currency.
Let us format a numeral using the internationalization API in the subsequent example.
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:
The output presented demonstrates the formatting of the number in alignment with Indian currency, United States currency, and European currency.
Method-2: Utilizing the Intl.NumberFormat with toLocaleString to format numbers as currency
The most straightforward approach for formatting a number involves using Intl.NumberFormat in conjunction with toLocaleString.
In this demonstration, we will format a number to represent currency by using Intl.NumberFormat in conjunction with toLocaleString.
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:
In the following output, we can observe that the numerical value is formatted in accordance with both Indian currency and United States currency standards.
Method-3: Utilizing the concatenation method to format numbers as currency to format a number as currency
This approach is employed to combine a numerical value into a currency format, which is the reason it is referred to as the concatenation method. This technique integrates two or more strings into one unified string.
In this example, we will format a number using the method of concatenation.
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:
In this output, we can observe that the number is presented in a format that aligns with the currency standards of the United States.
Method-4: Utilizing Template Literals and Regular Expressions to format a number as currency
Utilizing template literals alongside regular expressions, we can effectively format a number.
Let’s examine the subsequent example to format a number using template literals alongside 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:
The output demonstrates how the number is formatted to U.S. currency using the combination of 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
- Utilizing the internationalization API (ECMAScript 402)
- Utilizing the Intl.NumberFormat with toLocaleString
- Utilizing concatenation method
- Utilizing template literals and regular expressions