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 understand 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, USA follows the International Numbering System for representing USD, on the other hand, India follows Indian Numbering System for representing 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 from 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 you monetary value accordingly.
Example 1:
<!DOCTYPE html> < html > < head > < title > Formating number in currency string </ title > </ head > < body > < center > < h1 style = "color:green;" >GeeksforGeeks</ h1 > < h4 > Formatting 4800 as INR </ h4 > < script > var format = new Intl.NumberFormat('en-INR', { style: 'currency', currency: 'INR', minimumFractionDigits: 2, }); // for 4800 INR document.write(format.format(4800)); </ script > < center > </ body > </ html > |
Output:
Example 2:
<!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < title >Currency format</ title > <!-- jQuery CDN --> integrity = "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin = "anonymous" > </ script > <!-- End of CDN --> </ head > < body > < center > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < 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 > </ center > </ body > </ html > |
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.
Recommended Posts:
- How to convert a currency string to a double value with jQuery or Javascript?
- How to convert seconds to time string format hh:mm:ss using JavaScript ?
- How to format numbers by prepending 0 to single-digit numbers?
- How to format a float in JavaScript ?
- How do you display JavaScript datetime in 12 hour AM/PM format?
- How to get Month and Date of JavaScript in two digit format ?
- How to format a phone number in Human-Readable using JavaScript ?
- AngularJS | currency Filter
- JavaScript | Difference between String.slice and String.substring
- JavaScript | Check if a string is a valid JSON string
- Python | Get the real time currency exchange rate
- Python | Real time currency convertor using Tkinter
- How to count string occurrence in string using JavaScript?
- JavaScript | Insert a string at position X of another string
- JavaScript | Numbers
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.