How to format numbers as currency string in JavaScript ?
Last Updated :
30 Apr, 2024
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.
html
<!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.
html
<!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.
Similar Reads
Convert a String to Number in JavaScript To convert a string to number in JavaScript, various methods such as the Number() function, parseInt(), or parseFloat() can be used. These functions allow to convert string representations of numbers into actual numerical values, enabling arithmetic operations and comparisons.Below are the approache
4 min read
Convert a Number to a String in JavaScript These are the following ways to Convert a number to a string in JavaScript:1. Using toString() Method (Efficient and Simple Method)This method belongs to the Number.Prototype object. It takes an integer or a floating-point number and converts it into a string type.JavaScriptlet a = 20; console.log(a
1 min read
How to Format a Number with Two Decimals in JavaScript? In javascript, formatting numbers to a fixed number of decimal places is a common requirement, particularly in financial calculations, statistical data presentations, and to show in user interfaces. In this article we will explore different approaches to format a number with two decimals in JavaScri
2 min read
How to convert long number into abbreviated string in JavaScript ? We are given a long number and the task is to convert it to the abbreviated string(eg.. 1234 to 1.2k). Here 2 approaches are discussed with the help of JavaScript.Approaches to Convert Long Number to Abbreviated String:Table of ContentUsing JavaScript methodsUsing Custom functionUsing logarithmsUsin
6 min read
How to Restrict Input to Numbers and Decimals in JavaScript? Restricting an input box to allow only numbers and decimal points involves setting up validation rules that ensure users can only enter numerical values and decimal separators. This helps maintain data integrity and prevents invalid entries in forms or user input fields.Below are the approaches to r
3 min read
How to convert string into float in JavaScript? In this article, we will convert a string into a float in Javascript. We can convert a string into a float in JavaScript by using some methods which are described below: Methods to Concert String into Float:Table of Content Method 1: By using Type Conversion of JavaScriptMethod 2: By using parseFloa
6 min read
How to Validate Number String in JavaScript ? Validating a number string in JavaScript involves ensuring that a given string represents a valid number. This typically includes checking for digits, optional signs (+/-), decimal points, and possibly exponent notation (e.g., "1.23e4"). We will use various methods to validate number strings in Java
2 min read
How to Format a Date in JavaScript? Here are different ways to format the date in JavaScript.1. Using the toDateString() MethodThe toDateString() method formats the date object into a human-readable format as Day Month Date Year.SyntaxdateObj.toDateString();JavaScriptconst date = new Date(); const formatDate = date.toDateString(); con
2 min read
How to format a number as currency using CSS ? Given a number and the task is to format the number of an HTML element as currency using CSS and a little bit of JavaScript. It is not possible to complete the task with pure CSS. A bit of JavaScript is needed for the parsing of the number to add the commas. Approach: In the code, the CSS class curr
1 min read
How to Validate Decimal Numbers in JavaScript ? Validating user input is an essential aspect of Web Development. As a developer, when we are playing with the numeric inputs provided by the end-user, it is quite important to ensure that the input provided by the user is in the correct format. We can use the regular expression to Validate Decimal N
2 min read