Door 16

Intl-API – Internationalization Made Easy

In an increasingly globalized world, it is essential for web applications to be able to output content and data for different languages, regions, and cultural conventions. The Intl-API (Internationalization API) in JavaScript was developed exactly for this purpose. Thanks to this interface, numbers, currencies, dates and times, as well as texts can be easily and reliably adapted to regional customs without having to implement complicated formatting rules yourself.

Why Use Intl-API?

Without the Intl-API (Internationalization API), developers often had to rely on external libraries or complex, manual formatting. This could not only be error-prone but also meant additional maintenance effort. The Intl-API, on the other hand, offers a standardized solution integrated into most modern browsers. This way, you can focus on the core logic of your application while internationalization is already cleanly solved at a low level.

Date and Time Formatting with Intl.DateTimeFormat

With Intl.DateTimeFormat, you can effortlessly adapt date and time information to national customs. You determine which language and format you want to use:

// Example: German date format
const dateFormatter = new Intl.DateTimeFormat('de-DE', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long'
});

console.log(dateFormatter.format(new Date())); 
// Output (example): "Tuesday, December 10, 2024"

If you simply change the locale string ('de-DE', 'en-US', 'fr-FR', etc.), the entire formatting changes without having to touch the formatting code itself.

Numbers and Currencies with Intl.NumberFormat

The Intl-API also offers an elegant solution for number and currency display. Whether thousand separators, decimal places, or special currency symbols – everything is automatically formatted correctly.

// Example: Number in German format
const numberFormatter = new Intl.NumberFormat('de-DE', { 
  style: 'decimal',
  minimumFractionDigits: 2 
});

console.log(numberFormatter.format(1234567.89)); 
// Output: "1.234.567,89"

// Example: Currency formatting
const currencyFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR'
});

console.log(currencyFormatter.format(1234.56)); 
// Output: "1.234,56 €"

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

console.log(currencyFormatterEN.format(1234.56)); 
// Output: "$1,234.56"

List Formatting with Intl.ListFormat

With Intl.ListFormat, you can create grammatically correct lists in different languages:

const listFormatter = new Intl.ListFormat('en', { 
  style: 'long', 
  type: 'conjunction' 
});

console.log(listFormatter.format(['apples', 'bananas', 'oranges']));
// Output: "apples, bananas, and oranges"

const listFormatterDE = new Intl.ListFormat('de', { 
  style: 'long', 
  type: 'conjunction' 
});

console.log(listFormatterDE.format(['Äpfel', 'Bananen', 'Orangen']));
// Output: "Äpfel, Bananen und Orangen"

Relative Time Formatting with Intl.RelativeTimeFormat

Display time differences in a human-readable format:

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // "yesterday"
console.log(rtf.format(2, 'day')); // "in 2 days"
console.log(rtf.format(-3, 'month')); // "3 months ago"

const rtfDE = new Intl.RelativeTimeFormat('de', { numeric: 'auto' });

console.log(rtfDE.format(-1, 'day')); // "gestern"
console.log(rtfDE.format(2, 'day')); // "in 2 Tagen"

Practical Use Cases

1. Multi-language E-Commerce:

function formatPrice(amount, locale, currency) {
  const formatter = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency
  });
  return formatter.format(amount);
}

console.log(formatPrice(99.99, 'en-US', 'USD')); // "$99.99"
console.log(formatPrice(99.99, 'de-DE', 'EUR')); // "99,99 €"
console.log(formatPrice(99.99, 'ja-JP', 'JPY')); // "¥100"

2. Localized Date Display:

function formatEventDate(date, locale) {
  const formatter = new Intl.DateTimeFormat(locale, {
    dateStyle: 'full',
    timeStyle: 'short'
  });
  return formatter.format(date);
}

const eventDate = new Date('2024-12-24T19:00:00');
console.log(formatEventDate(eventDate, 'en-US'));
// "Sunday, December 24, 2024 at 7:00 PM"
console.log(formatEventDate(eventDate, 'de-DE'));
// "Sonntag, 24. Dezember 2024 um 19:00"

Conclusion

The Intl-API is a powerful and standardized solution for internationalization in JavaScript. It saves you from having to write complex formatting logic yourself and ensures that your application looks professional and localized for users worldwide. Whether dates, numbers, currencies, or lists – with the Intl-API, you have everything you need to make your application globally usable.

Use the Intl-API in your next project and experience how easy internationalization can be!