Internationalization — Explained with Examples

Internationalization (i18n) prepares software for multiple locales by separating content from code, enabling translation and cultural adaptation.

Internationalization is the design process that makes future localization possible. It involves extracting user-facing strings into message catalogs, supporting Unicode (UTF-8), formatting numbers/dates/currencies according to locale, handling pluralization rules, supporting text direction (LTR/RTL), and leaving space for text expansion (translations can be 30-50% longer). Localization (l10n) is the subsequent process of translating content for specific locales.

Think of internationalization like building a house with modular furniture before moving in (i18n), versus buying furniture that is custom-built for one specific room layout (non-internationalized). When you move to a different house (locale), modular furniture adjusts; custom furniture must be replaced entirely.

JavaScript’s Intl API and frameworks like react-intl, i18next, and vue-i18n provide built-in i18n support.

// Using JavaScript Intl API
// Date formatting
const date = new Date();
console.log(new Intl.DateTimeFormat('en-US').format(date));   // 6/19/2026
console.log(new Intl.DateTimeFormat('de-DE').format(date));   // 19.6.2026
console.log(new Intl.DateTimeFormat('ja-JP').format(date));   // 2026/6/19

// Number formatting
console.log(new Intl.NumberFormat('en-US').format(1234567.89)); // 1,234,567.89
console.log(new Intl.NumberFormat('de-DE').format(1234567.89)); // 1.234.567,89

// Currency formatting
console.log(new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
}).format(29.99));  // $29.99

// Pluralization
const messages = {
    en: { items: (n) => `${n} item${n !== 1 ? 's' : ''}` },
    pl: { items: (n) => n === 1 ? `${n} przedmiot` :
                              n % 10 < 5 && n % 10 > 1 ? `${n} przedmioty` :
                              `${n} przedmiotów` }
};

// Locale messages (e.g., en.json, de.json)
// en.json
{ "welcome": "Welcome, {name}!", "items": "{count} items" }

// de.json
{ "welcome": "Willkommen, {name}!", "items": "{count} Artikel" }

i18n best practices: avoid string concatenation, use ICU message format for complex messages, test with pseudo-localization, and plan for RTL languages like Arabic and Hebrew.

Localization, Accessibility, Unicode, React

Accessibility and i18n