How does internationalization work in JavaScript?

In this article, you will understand how internationalization works in JavaScript. Internationalization is the process of preparing software so that it can support local languages and cultural settings. It can include changing the date and time format, changing the metric system format, language format, etc.

JavaScript provides the Intl object which contains constructors for locale-sensitive formatting and language-sensitive string comparison. The most commonly used are Intl.DateTimeFormat for dates and Intl.NumberFormat for numbers.

Date and Time Formatting

Let's understand how to format dates for different locales using Intl.DateTimeFormat:

var inputDate = new Date(1990, 2, 25);
console.log("The date is defined as: ");
console.log(inputDate);

console.log("The date in United Kingdom format is: ");
console.log(new Intl.DateTimeFormat('en-GB').format(inputDate));

console.log("The date in American format is: ");
console.log(new Intl.DateTimeFormat('en-US').format(inputDate));

The date is defined as: 
Sun Mar 25 1990 00:00:00 GMT+0000 (UTC)
The date in United Kingdom format is: 
25/03/1990
The date in American format is: 
3/25/1990

Explanation

• Step 1 ? Define a dateTime value to 'inputDate' variable.

• Step 2 ? Convert the date time value specific to the United Kingdom format using DateTimeFormat('en-GB') function. Display the value after conversion.

• Step 3 ? Convert the date time value specific to the United States format using DateTimeFormat('en-US') function. Display the value after conversion.

Number Formatting

Numbers can also be formatted according to different locales using Intl.NumberFormat:

var inputNumber = 2153.93;
console.log("The number is defined as: ");
console.log(inputNumber);

console.log("The number after converting to French format is: ");
console.log(new Intl.NumberFormat('fr-FR').format(inputNumber));

console.log("The number after converting to American format is: ");
console.log(new Intl.NumberFormat('en-US').format(inputNumber));

The number is defined as: 
2153.93
The number after converting to French format is: 
2 153,93
The number after converting to American format is: 
2,153.93

Explanation

• Step 1 ? Define a numeric value to 'inputNumber' variable.

• Step 2 ? Convert the numeric value specific to the French format using the NumberFormat('fr-FR') function. Display the value after conversion.

• Step 3 ? Convert the numeric value specific to the United States format using the NumberFormat('en-US') function. Display the value after conversion.

Currency Formatting

You can also format numbers as currency for different locales:

var price = 1234.56;

console.log("USD format:");
console.log(new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
}).format(price));

console.log("EUR format:");
console.log(new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR'
}).format(price));

USD format:
$1,234.56
EUR format:
1.234,56 ?

Conclusion

JavaScript's Intl object provides powerful internationalization features for formatting dates, numbers, and currencies according to different locales. This makes it easy to create applications that work seamlessly across different regions and languages.