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"
  8. InitFraction.toLocaleString('en-IN', {
  9. minimumFractionDigits: 2,
  10. maximumFractionDigits: 3
  11. });
  12. //console output > 12,34,56,789.457
  14. InitFraction.toLocaleString('en-IN', {
  15. minimumFractionDigits: 3,
  16. maximumFractionDigits: 9
  17. });
  18. //console output > 12,34,56,789.456789
  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.