The JavaScript Intl Object

In this article, we’ll explore the Intl object and its capabilities in supporting an application’s internationalization and localization effort.

When developing web applications, catering to a diverse audience is crucial. This is because users from different regions and cultures have unique language requirements and formatting preferences.

JavaScript provides a powerful tool called the Intl object that simplifies the handling of language-specific functionalities. This includes formatting dates, numbers, currencies and even managing locale-specific data.

In this article, we’ll explore the Intl object and its capabilities in supporting an application’s internationalization and localization effort.

Working with Dates

Formatting dates is a common requirement when developing international applications. The Intl object offers the Intl.DateTimeFormat() constructor, which allows us to format dates based on a specific locale. Let’s consider an example by first creating a new Date object that represents the current date.

const date = new Date();

Assume we wanted the current date to be formatted in a certain format such as June 30, 2023. This date format entails we want the day and year portion of the date to be in the numeric format while the month portion is to be in the long format.

const date = new Date();
const options = { year: "numeric", month: "long", day: "numeric" };

To achieve the date output we’re looking for, we can create an instance of Intl.DateTimeFormat() with the locale set to 'en-US' and pass in the options we’ve specified.

const date = new Date();
const options = { year: "numeric", month: "long", day: "numeric" };
const formattedDate = new Intl.DateTimeFormat("en-US", options);

With our constructor established, we can then use the .format() function to format the date accordingly.

const date = new Date();
const options = { year: "numeric", month: "long", day: "numeric" };
const formattedDate = new Intl.DateTimeFormat("en-US", options).format(date);

console.log(formattedDate);
// Output: June 30, 2023

Working with Numbers

The Intl object also facilitates the formatting of numbers based on locale-specific conventions. For instance, different countries use distinct decimal separators, thousand separators, and currency symbols. The Intl.NumberFormat() constructor allows us to format numbers according to these conventions without us having to write any custom formatting code.

Let’s explore an example to further understand this. Assume we had a number like the following:

const number = 1004580.89;

The number above can be understood to be one million, four thousand, five hundred and eighty point eighty-nine. In the United States, this number would be formatted as:

US Formatting = 1,004,580.89

However, a locale like Germany uses the comma (,) and period (.) in the opposite manner. In Germany, the number would instead be formatted as:

Germany Formatting = 1.004.580,89

This is where the Intl.NumberFormat() constructor comes in handy. We can use the constructor to define a locale like de-DE which corresponds to the formatting conventions used in Germany. When the constructor is used, we can then leverage the format() function to format the number appropriately.

const number = 1004580.89;
const formattedNumberDE = new Intl.NumberFormat("de-DE").format(number);
const formattedNumberUS = new Intl.NumberFormat("en-US").format(number);

console.log(formattedNumberDE); // Output: 1.004.580,89
console.log(formattedNumberUS); // Output: 1,004,580.89

Working with Currencies

The Intl object also simplifies currency formatting by providing the Intl.NumberFormat() constructor with additional options to handle currency-specific formatting. Consider the following example:

const price = 42.99;
const currency = "USD";

const priceFormatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency,
});
const formattedPrice = priceFormatter.format(price);

console.log(formattedPrice);
// Output: $42.99

In the above code, we define a price value and specify the currency as USD. By using the style option set to 'currency' and passing the currency variable, we format the price according to the currency conventions of the United States. The resulting formattedPrice string includes the currency symbol ($) and the formatted price (42.99).

Handling Language-Specific Functionalities

The Intl object goes beyond date, number, and currency formatting. It also provides capabilities for handling language-specific functionalities such as sorting strings and managing pluralization.

Here’s an example of using the Intl object to sort strings according to the Swedish language rules:

const characters = ["a", "z", "Z", "ä"];
const collator = new Intl.Collator("sv");

const sortedCharacters = characters.sort(collator.compare);

console.log(sortedCharacters);
// Output: ['a', 'z', 'Z', 'ä']

Wrap-up

The Intl object in JavaScript empowers developers to create web applications that provide accurate and culturally sensitive formatting and language-specific functionalities. By utilizing the Intl.DateTimeFormat, Intl.NumberFormat, Intl.Collator and other constructors—developers can ensure a consistent user experience across different locales and enable their applications to cater to a global audience.

Just as importantly, Intl helps make development easier by providing built-in functionality for language-specific formatting and localization. This eliminates the need for developers to manually implement these functionalities, saving time and effort.

In this article, we’ve only touched the surface of all the different capabilities the JavaScript Intl object provides. For a more detailed run-through of all the different capabilities, be sure to check out the MDN documentation!