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.

var initNumber = 123456789.456789;
initNumber.toLocaleString();
//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

var InitFraction = 123456789.456789;
InitFraction.toLocaleString('en-IN', {
minimumFractionDigits: 0,
maximumFractionDigits: 0
});
//console output > "12,34,56,789"
InitFraction.toLocaleString('en-IN', {
minimumFractionDigits: 2,
maximumFractionDigits: 3
});
//console output > 12,34,56,789.457
InitFraction.toLocaleString('en-IN', {
minimumFractionDigits: 3,
maximumFractionDigits: 9
});
//console output > 12,34,56,789.456789
// options
//maximumFractionDigits -> The maximum number of fraction digits to use.
//maximumFractionDigits -> The minimum number of fraction digits to use.

Formatting Currencies

var InitNumber = 50000000;
var InitFraction = 123456789.456789;
InitNumber.toLocaleString('en-IN', {
style: 'currency',
currency: 'INR',
currencyDisplay: 'symbol'
});
//console output > "₹ 12,34,56,789.46"
InitNumber.toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'code'
});
//console output > "USD 123,456,789.46"
InitFraction.toLocaleString('az-AE', {
style: 'currency',
currency: 'AED',
currencyDisplay: 'code',
maximumFractionDigits: 5,
minimumFractionDigits: 2
});
//console output > "AED 123,456,789.45679"
// options
//style -> The formatting style to use. Possible values are "decimal" for plain number
// formatting, "currency" for currency formatting, and "percent" for percent formatting; // the default is "decimal".
//currency -> The currency to use in currency formatting. Possible values are the ISO 4217
// currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "INR" for
// Indian Rupee.
//currencyDisplay -> How to display the currency in currency formatting. Possible values are
// "symbol" to use a localized currency symbol such as €, "code" to use the
// ISO currency code, "name" to use a localized currency name such as
// "dollar"; the default is "symbol".
//maximumFractionDigits -> The maximum number of fraction digits to use.
//maximumFractionDigits -> The minimum number of fraction digits to use.

Formatting Date

var InitDate = new Date();
InitDate.toLocaleString('en-IN', {
timeZone: 'Asia/Kolkata',
hour12: true
});
//console output > "24/5/2019, 9:01:30 PM"
InitDate.toLocaleString('en-US', {
timeZone: 'America/New_York',
hour12: false
});
//console output > "5/24/2019, 11:31:30"
InitDate.toLocaleString('en-AE', {
timeZone: 'Asia/Dubai',
hour12: true
});
//console output > "5/24/2019, 7:31:30 PM"
//options
//timeZone -> The time zone to use. The only value implementations must recognize is "UTC"; the
// default is the runtime's default time zone.
//hour12 -> Whether to use 12-hour time (as opposed to 24-hour time). Possible values are true and
// false; the default is locale dependent.