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