Format Number, Currency And Date Using toLocaleString Method In JavaScript

Introduction

 
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.  


Similar Articles