JavaScript Intl API: Understanding the Basics and Beyond

JavaScript Intl API is a built-in object in the JavaScript language that provides internationalization support through its various constructors and functions. The Intl object is the namespace for the ECMAScript Internationalization API and offers language-sensitive features such as string comparison, number formatting, and date and time formatting.

The API allows developers to format and display data for a variety of languages and cultures, making it easier and more efficient to localize web applications. The functions provided by the Intl object handle complexities such as different calendars, time zones, and currency symbols, making the process of internationalization much simpler.

The Importance of the JavaScript Intl API

When building web applications or software, it is important to consider the cultural preferences of users. The Intl API provides a way to format data, such as numbers, dates, and times, based on the user's cultural preferences. This helps ensure that the data displayed to the user is in the format they expect. For example, different countries have different date formats. The Intl API can handle these differences and provide the correct format automatically.

The Intl API also provides language-sensitive string comparison. This is important when sorting and searching data. For example, in some languages, characters with diacritics (such as accents) are considered distinct from their base letters. The Intl API takes this into account and provides accurate sorting and searching results.

By using the Intl API, developers can make sure that the data displayed in their web applications or software is accurate and in the format expected by users, which leads to a better user experience.

JavaScript Intl API in different runtime environments

The Intl API is supported in both web browsers and in Node.js. In this section, we will cover how it can be used and what are the requirements for these two environments.

JS Intl in Browsers

The Intl API is supported in all modern web browsers, including Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge.

Using the Intl API in browsers is simple and does not require any additional packages or libraries. The API is available as a built-in object in the browser, ready to use.

JS Intl in Node

In Node.js, the Intl API is supported in newer versions.

Using the Intl API in Node is simple as in browsers and it does not require any additional packages or libraries.

Using the JavaScript Intl

The JavaScript Intl API provides a powerful toolset for formatting numbers, currencies, dates, and times in a culturally-sensitive manner. In this section, we will show some formatting examples with the Intl API.

Formatting Numbers

let number = 123456.789;

let enFormatter = new Intl.NumberFormat('en-US', {
  style: 'decimal',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
console.log(enFormatter.format(number)); // 123,456.79

let frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'decimal',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
console.log(frFormatter.format(number)); // 123 456,79

Formatting Currencies

let amount = 123456.789;

let enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
console.log(enFormatter.format(amount)); // $123,456.79

let frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'EUR',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
console.log(frFormatter.format(amount)); // 123 456,79 €

Formatting Dates

let date = new Date('2023-02-08T00:00:00');

let enFormatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});
console.log(enFormatter.format(date)); // February 8, 2023

let frFormatter = new Intl.DateTimeFormat('fr-FR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});
console.log(frFormatter.format(date)); // 8 février 2023

Formatting Relative Time

let enFormatter = new Intl.RelativeTimeFormat('en-US', {
  style: 'narrow'
});
console.log(enFormatter.format(-1, 'day')); // 1 day ago

let frFormatter = new Intl.RelativeTimeFormat('fr-FR', {
  style: 'narrow'
});
console.log(frFormatter.format(-1, 'day')); // -1 j

Sorting an Array of Strings

let names = ['Adam', 'Bob','Åslaug', 'Ørjan'];

let enCollator = new Intl.Collator('en-US', { 
  sensitivity: 'base' 
});
console.log(names.sort(enCollator.compare)); // ['Adam', 'Åslaug', 'Bob', 'Ørjan']

let svCollator = new Intl.Collator('sv-SE', { 
  sensitivity: 'base' 
});
console.log(names.sort(svCollator.compare)); // ['Adam', 'Bob', 'Åslaug', 'Ørjan']

Plural Usage

let number = 2;

let enFormatter = new Intl.PluralRules('en-US', { 
  type: 'cardinal' 
});
console.log(enFormatter.select(number)); // other

let arFormatter = new Intl.PluralRules('ar-EG', { 
  type: 'cardinal' 
});
console.log(arFormatter.select(number)); // two

For more details on plurals, see the language plural rules page.

Libraries relying on JavaScript Intl API

As we already explained, the JavaScript Intl API is a built-in feature in JavaScript that helps with internationalization by providing tools for formatting numbers, dates, and times based on cultural preferences and language-sensitive string comparison. It's a great starting point for handling many internationalization tasks. However, for some more advanced scenarios, you will probably need to use third-party libraries.

Luxon and React-Intl are some of the libraries that are built on top of the Intl API. They offer additional functionality and provide a more advanced way to handle internationalization in web development.

Luxon is a library that provides similar features, but with more advanced options. It makes handling time zones easier and offers more flexible formatting options for dates and times.

React-Intl is a library for React applications that provides internationalization support. It goes beyond the Intl API and provides tools for translations, which the Intl API does not offer.

Conclusion

In conclusion, the JavaScript Intl API is a powerful tool for formatting and localizing text in web applications. Whether you're working with numbers, currencies, dates, or relative times, the Intl API provides a robust set of features to help you customize your text to suit the needs of your users. Additionally, the API is built into the JavaScript language, so it is readily available for use in both browsers and Node environments.

While the Intl API offers a lot of power, it is important to understand that it may not always be the best choice for every use case. Other localization and formatting libraries, such as Luxon and React-Intl, can offer additional features and customizations that may be better suited to your needs.

Regardless of which approach you choose, the important thing is to understand the basics of the JavaScript Intl API, so you can make informed decisions about how to best format and localize your web applications.

Knowing how to format numbers, dates, and the like is only one part of the software localization. However, other parts, such as translation, review of translations, use of dictionaries and the like, are more complex areas and generally require more time and dedication. Fortunately, specialized tools can help you with that. Try Localizely for free.