New Intl APIs in JavaScript

Learn how to use the new Intl object to format data into a specific locale

The Intl object is available in the global scope and is used for formatting strings, numbers, and date and time in the locale-specific format. It does the work of internationalizing information displayed to the user.

A quick tip before we start: Use Bit to share and collaborate on your JS utility functions with your team or with the entire open-source community. Make your projects truly modular by versioning and collaborating on single components separately — with absolutely zero overhead.

Photo by Kyle Glenn on Unsplash

Internationalization is the process of designing a software application so that it can be adapted to various languages and regions without engineering changes.

The JavaScript developers don’t have to ship KBs of locale-specific data in the main bundles. The Intl object has various constructors and methods that take in locale object as one of the parameters and format data as required. Here’s how the Intl global object looks like:

Intl in Global Scope

The Collator , DateTimeFormat , ListFormat , NumberFormat , PluralRules , RelativeTimeFormat are the constructors in the Intl namespace. They take in two arguments — locales and options. The locale argument must be a string in BCP 47 language tag or an array of such strings. If you’re interested in knowing more about the BCP 47 language tag , here’s an excerpt from MDN :

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. While the tag is not case sensitive, it is recommended to use title case for script code, upper case for country and region codes and lower case for everything else.

The default value of the locale argument is set to the locale of the runtime. Some of the examples of the locale are — en (English) , hi (Hindi) , ta-in (Tamil-India) . The options argument is optional and its structure varies for different constructors. It is basically used for providing additional information for formatting.

In this article, we’re going to look at some of the new APIs that are added in the Intl namespace. These new APIs were announced in Google I/O ‘19 . Let’s get to these APIs in detail:

Intl.RelativeTimeFormat

The RelativeTimeFormat constructor is used to generate human-friendly phrases for timestamps. It converts the hard-to-read date object into its relative time string. Let’s see this in action:

Intl.RelativeTimeFormat constructor with en locale

Notice the first argument to the Intl.RelativeTimeFormat constructor as en . The possible values for the numeric key in the options object are always and auto — always would format it in numbers as:

rtf.format(-1, 'month') would result in 1 month ago.

If you’d want to display the relative bits in Tamil, you can do so in no time as:

Intl.RelativeTimeFormat constructor with ta-in locale

The relative time strings yesterday , today , tomorrow , etc provide a better user experience! This is supported in Chrome 71 and FireFox 65.