Learn how to work with internationalization in JavaScript with the help of the powerful Intl
object. The JavaScript Internationalization API provides access to several properties that enable language-sensitive string comparison, date and time formatting, number formatting, plural formatting, and relative time formatting. In addition, the API offers the Intl.getCanonicalLocales()
method to check if a locale is valid and return the correct formatting for it.
Intl.Collator
The Intl.Collator
property allows for language-sensitive string comparison. To initialize a Collator
object, use new Intl.Collator()
with the desired locale. The object’s compare()
method returns a positive value if the first argument comes after the second, a negative value if it’s the reverse, and zero if they are the same:
const collator = new Intl.Collator('it-IT');
collator.compare('a', 'c'); // a negative value
collator.compare('c', 'b'); // a positive value
This property is useful for sorting arrays of characters.
Intl.DateTimeFormat
The Intl.DateTimeFormat
property allows for language-sensitive date and time formatting. To initialize a DateTimeFormat
object, use new Intl.DateTimeFormat()
with the desired locale. Pass a date to the object’s format()
method to format it according to the locale’s preferences:
const date = new Date();
let dateTimeFormatter = new Intl.DateTimeFormat('it-IT');
dateTimeFormatter.format(date); // 27/1/2019
dateTimeFormatter = new Intl.DateTimeFormat('en-GB');
dateTimeFormatter.format(date); // 27/01/2019
dateTimeFormatter = new Intl.DateTimeFormat('en-US');
dateTimeFormatter.format(date); // 1/27/2019
The formatToParts()
method returns an array with all the date parts:
const date = new Date();
const dateTimeFormatter = new Intl.DateTimeFormat('en-US');
dateTimeFormatter.formatToParts(date);
/*
[
{ type: 'month', value: '1' },
{ type: 'literal', value: '/' },
{ type: 'day', value: '27' },
{ type: 'literal', value: '/' },
{ type: 'year', value: '2019' }
]
*/
You can also format the time. For more options, refer to the MDN reference.
Intl.NumberFormat
The Intl.NumberFormat
property allows for language-sensitive number formatting, including currency formatting. Suppose you have a number like 10
representing the price of something. You want to format it as $10.00
. If the number has more than 3 digits, it should be displayed differently, such as $1,000.00
, following the conventions of different countries.
To achieve this, use new Intl.NumberFormat()
and pass the desired locale along with additional options, such as style, currency, and minimum fraction digits:
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2,
});
formatter.format(1000); // "$1,000.00"
formatter.format(10); // "$10.00"
formatter.format(123233000); // "$123,233,000.00"
The minimumFractionDigits
property ensures that the fraction part always has at least 2 digits. Check the NumberFormat MDN page for other available parameters.
Intl.PluralRules
The Intl.PluralRules
property enables language-sensitive plural formatting and plural language rules. Consider the example of ordering numbers: 0th, 1st, 2nd, 3rd, 4th, 5th, and so on. The Intl.PluralRules
property is perfect for handling such cases.
To use it, create a PluralRules
object using new Intl.PluralRules()
and specify the desired locale along with the type as ordinal
. Then, use the object’s select()
method to get the corresponding plural category for a given number:
const pr = new Intl.PluralRules('en-US', {
type: 'ordinal',
});
pr.select(0); // other
pr.select(1); // one
pr.select(2); // two
pr.select(3); // few
pr.select(4); // other
pr.select(10); // other
pr.select(22); // two
In this example, we translate other
to th
, one
to st
, two
to nd
, and few
to rd
. You can use an object as an associative array to create a mapping:
const suffixes = {
one: 'st',
two: 'nd',
few: 'rd',
other: 'th',
};
Create a formatting function that retrieves the corresponding value from the object and returns a string containing the original number and its suffix:
const format = (number) => `${number}${suffixes[pr.select(number)]}`;
Now, you can use it like this:
format(0); // 0th
format(1); // 1st
format(2); // 2nd
format(3); // 3rd
format(4); // 4th
format(21); // 21st
format(22); // 22nd
Please note that while Chrome and Opera currently support Intl.RelativeTimeFormat
and Intl.ListFormat
, other browsers may not have implemented them yet.
Tags: javascript, internationalization, localization, date and time formatting, number formatting, string comparison, plural formatting, browser API