INTL JS API

As an application begins to increase in adoption, it becomes important to personalize user experience across different timezone and localities.

JavaScript is here to assist with language and region differences, such as Unicode support, customizing interfaces for various alphabets, and sorting non-English text.

You can do that all with JavaScript's Intl API features, no need for external libraries, it will enhance user experience but also trim down your app's JavaScript payload, leading to faster load times and efficiency gains

Let's Gets Started

The Intl object provides access to several constructors, like

• DateTimeFormat
• RelativeTimeFormat
• NumberFormat
• Collator
• ListFormat
• PluralRules

see the documentation here

Formatting Date and Time
Let's start by formatting dates and times

const formattedDateTime = new Intl.DateTimeFormat('en');
console.log(formattedDateTime.format(new Date()));

Output
9/8/2023

• The DateTimeFormat object can be used to format dates and times in different locales, in this code we use English format which is en
• It will return the current date and time in the English format

If you want use the default locale provided by the user's environment (usually based on your operating system or browser settings) you can use undefined

const formattedDateTime = new Intl.DateTimeFormat(undefined, {dateStyle: "short"});
console.log(formattedDateTime.format(new Date()));

Output :
9/8/23

• Not also we can use the default local, we can also specify the formatting options using dateStyle property.
• We set the format to short, which means we want a short date format.

Display Time Interval
when you want to display time intervals in a way that is more human-readable and context-aware you can use RelativeTimeFormat

const formatter = new Intl.RelativeTimeFormat(undefined);
console.log(formatter.format(5, "hour");

Output :
in 5 hour

• The RelativeTimeFormat object takes two arguments in its format method
• The first argument is the numeric value representing the time interval. It can be positive for future times or negative for past times.
• The second argument is a string specifying the time unit, such as 'year', 'month', 'week', 'day', 'hour', 'minute', 'second', etc.

Formatting Number
NumberFormat is used to control how number are displayed, including formatting them with the appropriate symbols, decimal separators, and thousands separators for a given locale.

const formatter = new Intl.NumberFormat('ja-JP', {
    currency: "JPY",
    style: "currency",
});
console.log(formatter.format(18000));

Output :
￥18,000

• With NumberFormat we can also display a number as a currency
• 'ja-JP' is used as the locale parameter. This explicitly sets the locale to Japanese (Japan).
• { currency: "JPY", style: "currency" } is an options object that specifies how the number should be formatted. It indicates that the number should be formatted as a currency and that the currency symbol should be "JPY" for Japanese Yen.

Plural Rules
Different languages have different rules for plurals (e.g., singular, plural, dual), and PluralRules helps you format numbers accordingly.

const formatter = new Intl.PluralRules(undefined);
console.log(formatter.select(3)); 

Output :
other

• To use Intl.PluralRules, we need to create an instance of it, specifying the desired locale (or using the default locale) as a parameter. In this example, i have used undefined as the locale parameter, which means it will use the default locale of the user's browser or system.
• Once we have a PluralRules object, we can use its select() method to determine the plural form for a given number. This method takes a number as an argument and returns the corresponding plural category
• The output 'other' indicates that, in my country, the number 3 belongs to the 'other' plural category

Overall, Intl.PluralRules is useful when you need to handle pluralization in a localized manner in your JavaScript applications. It allows you to adapt the formatting of numbers based on the rules of the target language or locale, ensuring that your application's content is grammatically correct and culturally appropriate.

CONCLUSION

The Intl JavaScript API emerges as a powerful ally, bridging language gaps and fostering global connectivity. With its ability to seamlessly handle everything from date and time formatting to currency conversion and beyond, Intl empowers developers to create applications that speak the language of their users.