XQA
Back to JavaScript
2026-04-146 min read

Internationalization (JavaScript)

Learn Internationalization (JavaScript) step by step with clear examples and exercises.

Title: JavaScript Internationalization - A full guide

Why This Matters

In today's globalized world, it is essential for web applications to cater to users from various regions and languages. JavaScript Internationalization (i18n) empowers developers to create applications that adapt to different locales, ensuring a seamless user experience regardless of the user’s language or region. This skill is crucial in both exams and job interviews, as well as when encountering real-world bugs related to internationalization.

Importance of Internationalization

  1. User engagement: Providing a localized experience can increase user engagement by making your application more accessible and easier to use for users from different regions.
  2. Reduced errors: Properly handling date, time, number, and text formatting according to the user’s locale can help prevent common internationalization-related bugs.
  3. Compliance with standards: Adhering to web standards like Unicode and CLDR (Common Locale Data Repository) ensures your application is compatible with a wide range of devices and platforms.
  4. Expanding markets: By making your application accessible to users from all over the world, you can tap into new markets and increase your user base.

Prerequisites

To fully understand this guide, you should have a solid foundation in JavaScript, including:

  1. Basic understanding of variables, functions, and data structures (arrays, objects)
  2. Familiarity with control flow statements like loops and conditional statements
  3. Knowledge of the Document Object Model (DOM) and how to manipulate it using JavaScript
  4. Awareness of common web standards such as HTML and CSS
  5. Understanding of ES6 modules and their usage for importing external libraries
  6. Familiarity with regular expressions to handle text formatting
  7. Knowledge of how to work with dates, times, numbers, and strings in JavaScript

Core Concept

Internationalization in JavaScript involves handling text, date/time formatting, number formatting, and collation (sorting) according to the user’s locale. The Internationalization API provides a set of built-in objects to facilitate these tasks:

Intl Objects

  1. Intl: Provides access to various internationalization features like number formatting, date formatting, currency formatting, etc.
  2. Intl.Collator: Used for sorting strings in a locale-specific manner.
  3. Intl.PluralRules: Helps with plural rules based on the user’s locale.
  4. Intl.RelativeTimeFormat: Formats and localizes relative time expressions.
  5. Intl.DateTimeFormat: Used for formatting dates and times according to a specific locale.
  6. Intl.Collator.prototype.compare: Compares two strings based on the specified locale.
  7. Intl.NumberFormat: Formats numbers according to a specific locale.
  8. Intl.PluralRules.prototype.select: Returns the correct plural form for a given number based on the user’s locale.

Using Intl Objects

To create an instance of an Intl object, you need to specify the desired locale and options (if any). For example, to format a date in German, you would use:

const deFormatter = new Intl.DateTimeFormat('de-DE', { year: 'numeric', month: 'long', day: 'numeric' });

Worked Example

Let’s create an example that formats a date and number using different locales:

// Import Intl objects
import { DateTimeFormat, NumberFormat } from 'intl';

// Set up date and number variables
const date = new Date();
const number = 123456;

// Create date formatter for different locales
const usFormatter = new DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
const deFormatter = new DateTimeFormat('de-DE', { tag: 'date', weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });

// Create number formatter for different locales
const usNumberFormatter = new NumberFormat('en-US', { style: 'currency', currency: 'USD' });
const deNumberFormatter = new NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });

// Format and log the date and number using different locales
console.log(`Date (en-US): ${usFormatter.format(date)}`);
console.log(`Date (de-DE): ${deFormatter.format(date)}`);
console.log(`Number (en-US): ${usNumberFormatter.format(number)}`);
console.log(`Number (de-DE): ${deNumberFormatter.format(number)}`);

Common Mistakes

  1. Not initializing Intl objects properly: Make sure to pass the correct locale and options when creating an Intl object.
  2. Using outdated APIs: Avoid using deprecated APIs like navigator.language or navigator.browserLanguage. Instead, use the modern Internationalization API.
  3. Not handling missing locales gracefully: Handle it appropriately (e.g., fall back to default formatting) if a requested locale is not supported by the browser.
  4. Ignoring user preferences: Always respect user preferences for language and region settings when possible.
  5. Hardcoding locale-specific values: Avoid hardcoding locale-specific values in your code; instead, use the Internationalization API to format dates, numbers, etc., according to the user’s locale.
  6. Inconsistent formatting across the application: Maintain consistency in formatting throughout your application by using the Internationalization API for all date, time, number, and text formatting needs.
  7. Considering only left-to-right (LTR) languages: When working with right-to-left (RTL) languages like Arabic or Hebrew, ensure that your layout is properly adapted to accommodate them.
  8. Not handling time zones correctly: Be aware of the user’s time zone and adjust dates and times accordingly when necessary.
  9. Ignoring cultural differences in text: Respect cultural sensitivities and local customs when working with text, such as translating content appropriately for different regions.

Best Practices

  1. Use the modern Internationalization API: Always use the latest version of the Internationalization API to ensure compatibility with various browsers and devices.
  2. Handle missing locales gracefully: Provide fallback options or default formatting when a requested locale is not supported by the browser.
  3. Respect user preferences: Always respect user preferences for language and region settings when possible.
  4. Maintain consistency in formatting: Ensure that your application consistently formats dates, times, numbers, and text according to the user’s locale.
  5. Test your application with multiple locales: Test your application with various locales to ensure proper functionality and avoid internationalization-related bugs.
  6. Consider performance: Be aware of potential performance implications when working with large amounts of data or complex formatting rules, and optimize your code accordingly.
  7. Document your code: Clearly document how to use the internationalization features in your application to help other developers understand and maintain your codebase.

Practice Questions

  1. Write a JavaScript function that formats a number as a percentage using the Internationalization API.
  2. How would you format a date in French (fr-FR) using the Internationalization API?
  3. What is the difference between Intl.Collator.prototype.compare and Intl.Collator.prototype.sort?
  4. Write a JavaScript function that formats a date as a relative time expression using the Internationalization API.
  5. How can you ensure that your application handles both left-to-right (LTR) and right-to-left (RTL) languages properly?

FAQ

  1. How can I format a date using the Internationalization API in Spanish?

To format a date in Spanish, you would specify 'es-ES' as the locale:

const esFormatter = new Intl.DateTimeFormat('es-ES', { year: 'numeric', month: 'long', day: 'numeric' });
  1. What is the difference between navigator.language and navigator.browserLanguage?

navigator.language provides the user’s preferred language, while navigator.browserLanguage provides the language that the browser was set to when it was installed. It's recommended to use navigator.language.

  1. How can I ensure that my application consistently formats dates, times, numbers, and text according to the user’s locale?

Use the Internationalization API for all date, time, number, and text formatting needs in your application. This ensures consistency in formatting across different locales.

  1. How can I handle right-to-left (RTL) languages when working with text in JavaScript?

When working with RTL languages like Arabic or Hebrew, ensure that your layout is properly adapted to accommodate them by using CSS properties such as direction: rtl and adjusting the order of elements in your HTML.

  1. How can I handle time zones correctly when working with dates in JavaScript?

To handle time zones correctly, use the Intl.DateTimeFormat object with the appropriate options to specify the desired time zone. You can also convert between different time zones using libraries like moment.js.

Internationalization (JavaScript) | JavaScript | XQA Learn