Format Number, Currency And Date Using toLocaleString Method In JavaScript

We have been using various techniques and logics for formatting numbers, currencies and dates. Once one uses the tolocalestring() he or she is definitely not going back. After doing some research online we are surprised to see how few people are actually using this in their web apps despite its simplicity and easy implementation.
 
"toLocaleString()" is a method that returns a string with a language sensitive representation of number or date. Basically in the case of numbers it returns a string of numbers with comma separators and in the case of the date, it formats it in ‘dd-mm-yyyy’ or ‘mm-dd-yyyy’ depending on the language and locales one specifies in the parameter of the method.
 
Here in this article, we are about to explore the use of toLocaleString() to format numbers, dates, and currencies.
 
Below is a basic implementation of this method to localize the number.
  1. var initNumber = 123456789.456789;  
  2. initNumber.toLocaleString();  
  3. //console output > "123,456,789.457"  
The method toLocaleString() mainly takes 2 arguments.
 
.toLocaleString([locales][,options])
 

locales

 
It’s an optional parameter in the string which holds a BCP 47 language tag or an array of such tags. By default, it uses “default” locale.
 
A BCP 47 language tag defines a language and minimally contains a primary language code. In its most common form, it can contain, in order: a language code, a script code, and a country or region code, all separated by hyphens.
 
Note
The tag is not case sensitive but it is recommended to use title case for script code, upper case for country and a small case for everything else.
 
Example

“hi” : Hindi (primary language)
“en-IN” : English (primary language) and India(country)
“hi-Deva-IN” : Hindi (primary language), Devanagari(script) and India(country)
 
Formatting Number
  1. var InitFraction= 123456789.456789;  
  2. InitFraction.toLocaleString('en-IN', {   
  3.       minimumFractionDigits: 0,   
  4.       maximumFractionDigits: 0   
  5. });  
  6. //console output > "12,34,56,789"  
  7.   
  8. InitFraction.toLocaleString('en-IN', {   
  9.        minimumFractionDigits: 2,  
  10.        maximumFractionDigits: 3   
  11. });  
  12. //console output > 12,34,56,789.457  
  13.   
  14. InitFraction.toLocaleString('en-IN', {   
  15.         minimumFractionDigits: 3,  
  16.         maximumFractionDigits: 9   
  17. });  
  18. //console output > 12,34,56,789.456789  
  19.   
  20. // options  
  21. //maximumFractionDigits -> The maximum number of fraction digits to use.  
  22. //maximumFractionDigits -> The minimum number of fraction digits to use.   
Formatting Currencies
  1. var InitNumber = 50000000;  
  2. var InitFraction = 123456789.456789;  
  3. InitNumber.toLocaleString('en-IN', {   
  4.        style: 'currency',   
  5.        currency: 'INR',   
  6.        currencyDisplay: 'symbol'   
  7. });  
  8. //console output > "₹ 12,34,56,789.46"  
  9. InitNumber.toLocaleString('en-US', {   
  10.        style: 'currency',   
  11.        currency: 'USD',   
  12.        currencyDisplay: 'code'   
  13. });  
  14. //console output > "USD 123,456,789.46"  
  15. InitFraction.toLocaleString('az-AE', {   
  16.        style: 'currency',   
  17.        currency: 'AED',   
  18.        currencyDisplay: 'code',  
  19.        maximumFractionDigits: 5,   
  20.        minimumFractionDigits: 2   
  21. });  
  22. //console output > "AED 123,456,789.45679"  
  23. // options  
  24. //style -> The formatting style to use. Possible values are "decimal" for plain number     
  25. //         formatting, "currency" for currency formatting, and "percent" for percent formatting; //         the default is "decimal".  
  26. //currency -> The currency to use in currency formatting. Possible values are the ISO 4217   
  27. //            currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "INR" for  
  28. //            Indian Rupee.  
  29. //currencyDisplay -> How to display the currency in currency formatting. Possible values are   
  30. //                   "symbol" to use a localized currency symbol such as €, "code" to use the   
  31. //                   ISO currency code, "name" to use a localized currency name such as  
  32. //                   "dollar"; the default is "symbol".  
  33. //maximumFractionDigits -> The maximum number of fraction digits to use.  
  34. //maximumFractionDigits -> The minimum number of fraction digits to use.   
Formatting Date
  1. var InitDate = new Date();  
  2. InitDate.toLocaleString('en-IN', {   
  3.        timeZone: 'Asia/Kolkata',   
  4.        hour12: true   
  5. });  
  6. //console output > "24/5/2019, 9:01:30 PM"  
  7. InitDate.toLocaleString('en-US', {   
  8.        timeZone: 'America/New_York',   
  9.        hour12: false   
  10. });  
  11. //console output > "5/24/2019, 11:31:30"  
  12. InitDate.toLocaleString('en-AE', {   
  13.        timeZone: 'Asia/Dubai',   
  14.        hour12: true   
  15. });  
  16. //console output > "5/24/2019, 7:31:30 PM"  
  17. //options  
  18. //timeZone -> The time zone to use. The only value implementations must recognize is "UTC"; the   
  19. //           default is the runtime's default time zone.  
  20. //hour12 -> Whether to use 12-hour time (as opposed to 24-hour time). Possible values are true and   
  21. //          false; the default is locale dependent.