How to format numbers as currency string in JavaScript ?
A number, represented as monetary value, creates an impact and becomes much more readable, and that’s the reason behind formatting a number as currency. For example, a number, let’s say 100000 when represented as $100,000.00 it becomes pretty much understood that it represents a monetary value, and the currency in which it is formatted is USD. Different countries have different currencies, as well as different conventions to display monetary values. For example, the USA follows the International Numbering System to represent USD, on the other hand, India follows the Indian Numbering System to represent INR.
Syntax:
Intl.NumberFormat('en-US', {style: 'currency', currency: 'target currency'})
.format(monetary_value);
Explanation: The ‘en-INR’ and ‘en-US’ is used as the locale here, a list of all the locales can be found here, and the currency used here is ‘INR’ and ‘USD’, but all the standard currencies are supported. Choosing a different locale and currency will format your monetary value accordingly.
Example 1: In this example, we format 4800 as INR currency string using Intl.NumberFormat with ‘en-IN’ locale, currency style, and minimumFractionDigits set to 2.
<!DOCTYPE html>
<html>
<head>
<title>
Formatting number in currency string
</title>
</head>
<body>
<h4>
Formatting 4800 as INR
</h4>
<script>
let format = new Intl.NumberFormat('en-IN', {
style: 'currency',
currency: 'INR',
minimumFractionDigits: 2,
});
// for 4800 INR
document.write(format.format(4800));
</script>
</body>
</html>
Output:
format numbers as currency string Example Output
Example 2: In this example we demonstrates formatting numbers as currency strings in JavaScript, using ‘en-IN’ for INR currency and ‘en-US’ for USD, applying Intl.NumberFormat to spans with specific classes.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<title>Currency format</title>
<!-- jQuery CDN -->
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js"
integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<!-- End of CDN -->
</head>
<body>
<h4>
Format numbers as currency string in JavaScript
</h4>
<b>Example 1: Locale: 'en-IN' Currency: 'INR'</b>
<p>Course ABC Fees: 783984.356 (Formatting Not Used)</p>
<p>Course ABC Fees:
<span class="currency-inr">783984.356</span>
(Formatting Used)
</p>
<b>Example 2: Locale: 'en-US' Currency: 'USD'</b>
<p>Course ABC Fees: 783984.356 (Formatting Not Used)</p>
<p>Course ABC Fees:
<span class="currency-usd">783984.356</span>
(Formatting Used)
</p>
<script type="text/javascript">
$('.currency-inr').each(function () {
var monetary_value = $(this).text();
var i = new Intl.NumberFormat('en-IN', {
style: 'currency',
currency: 'INR'
}).format(monetary_value);
$(this).text(i);
});
$('.currency-usd').each(function () {
var monetary_value = $(this).text();
var i = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(monetary_value);
$(this).text(i);
});
</script>
</body>
</html>
Output:
format numbers as currency string Example Output
Note: We are using ECMAScript Internationalization API (Intl Object) for formatting purpose, that comes under the category of JavaScript Standard built-in objects and jQuery for DOM Manipulation.
Contact Us