Learn Intl API

Introduction

The Internationalization API (Intl) in JavaScript provides functionalities for internationalization and localization of web applications. It allows you to format dates, numbers, and strings according to different languages and regions. In this guide, you'll learn how to use the Intl API to enhance the internationalization of your JavaScript applications.

Supported Features

The Intl API supports several key features for internationalization:

1. Number Formatting: You can format numbers according to different locales, including options for specifying the number of decimal places, currency, and more.

2. Date and Time Formatting: You can format dates and times according to different locales, including options for date styles, time styles, and time zones.

1. Collation and Sorting: You can compare and sort strings according to the rules of different languages and regions, taking into account character order, accents, and case sensitivity.

2. Message Formatting: You can create localized messages with placeholders and format them dynamically based on user locale and preferences.

Number Formatting

To format numbers using the Intl API, you can use the Intl.NumberFormat constructor:

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

const formattedNumber = formatter.format(1000);
// Result: "$1,000.00"

Date and Time Formatting

You can format dates and times using the Intl.DateTimeFormat constructor:

const formatter = new Intl.DateTimeFormat('fr-FR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

const formattedDate = formatter.format(new Date());
// Result: "5 septembre 2023"

Collation and Sorting

The Intl API allows you to sort strings based on the user's locale:

const sortedNames = ['Élise', 'Zoe', 'Adam', 'Émilie'].sort(
  new Intl.Collator('fr-FR').compare
);
// Result: ["Adam", "Élise", "Émilie", "Zoe"]

Message Formatting

You can create localized messages using the Intl.MessageFormat constructor and format them with dynamic values:

const message = new Intl.MessageFormat('Hello, {name}!', 'en-US');
const formattedMessage = message.format({ name: 'Alice' });
// Result: "Hello, Alice!"

Language and Region Tags

Locale identifiers, such as 'en-US' or 'fr-FR', consist of a language tag and, optionally, a region subtag. You can use language tags to specify the desired locale for formatting:

• en: English
• fr: French
• es: Spanish
• de: German
• zh: Chinese

You can find a comprehensive list of language tags in the BCP 47 specification.

Detecting User Locale

To determine the user's preferred locale, you can use the navigator.language property:

const userLocale = navigator.language;

Browser Support

The Intl API is supported in modern browsers, including Chrome, Firefox, Safari, and Edge. However, some older browsers may have limited support. To ensure compatibility, consider using a polyfill like intl-messageformat or intl-locales-supported.

Conclusion

The Internationalization API (Intl) in JavaScript provides essential tools for creating multilingual and culturally sensitive web applications. By using the Intl API, you can offer a better user experience to a global audience by formatting numbers, dates, and messages according to their preferences.

Estimated Reading Time: 5 minutes

Comments

[V Sai Harsha]

const TimeFormatter = new Intl.RelativeTimeFormat('en')
const gif = TimeFormatter.format(-84,"years")

console.log("Its been "+ gif)

I wonder what does this do? 😳

[Jannis]

For everyone: jsfiddle.net/8xqjt53h/