What Is i18n — Internationalization Explained for Beginners

// i18n/setup.js — Basic internationalization setup
const i18n = {
    locale: 'en-US',
    fallbackLocale: 'en-US',
    translations: {},
    listeners: [],

    // Initialize with translations
    init(translations, options = {}) {
        this.translations = translations;
        this.locale = options.locale || navigator.language || 'en-US';
        this.fallbackLocale = options.fallbackLocale || 'en-US';
    },

    // Translate a key with optional variables
    t(key, variables = {}) {
        // Try current locale, fall back to fallback locale
        let message = this.translations[this.locale]?.[key]
            || this.translations[this.fallbackLocale]?.[key]
            || key;

        // Replace variables in the message
        Object.entries(variables).forEach(([k, v]) => {
            message = message.replace(`{${k}}`, v);
        });

        return message;
    },

    // Change locale and notify listeners
    setLocale(locale) {
        this.locale = locale;
        this.listeners.forEach(fn => fn(locale));
    },

    // Subscribe to locale changes
    onChange(fn) {
        this.listeners.push(fn);
    }
};

// Translation files — separated from code
const translations = {
    'en-US': {
        'greeting': 'Hello, {name}!',
        'welcome': 'Welcome to our application.',
        'logout': 'Sign out',
        'search': 'Search...',
        'items_count': 'You have {count} items.'
    },
    'es-ES': {
        'greeting': '¡Hola, {name}!',
        'welcome': 'Bienvenido a nuestra aplicación.',
        'logout': 'Cerrar sesión',
        'search': 'Buscar...',
        'items_count': 'Tienes {count} artículos.'
    },
    'fr-FR': {
        'greeting': 'Bonjour, {name} !',
        'welcome': 'Bienvenue dans notre application.',
        'logout': 'Déconnexion',
        'search': 'Rechercher...',
        'items_count': 'Vous avez {count} articles.'
    }
};

// Usage
i18n.init(translations, { locale: 'es-ES' });
console.log(i18n.t('greeting', { name: 'Maria' }));
// Output: ¡Hola, Maria!

// i18n/locale-detection.js — Determine user's preferred locale
class LocaleDetector {
    constructor(supported = ['en-US', 'es-ES', 'fr-FR', 'de-DE']) {
        this.supported = supported;
    }

    // Detect from browser
    detect() {
        return this.fromNavigator()
            || this.fromCookie()
            || this.fromLocalStorage()
            || this.fromUrl()
            || this.fallback();
    }

    fromNavigator() {
        const lang = navigator.language || navigator.userLanguage;
        if (lang) {
            return this.bestMatch(lang);
        }
        return null;
    }

    fromCookie() {
        const match = document.cookie.match(/(?:^|;\s*)locale=([^;]+)/);
        if (match) {
            return this.bestMatch(match[1]);
        }
        return null;
    }

    fromLocalStorage() {
        const stored = localStorage.getItem('locale');
        if (stored) {
            return this.bestMatch(stored);
        }
        return null;
    }

    fromUrl() {
        const params = new URLSearchParams(window.location.search);
        const lang = params.get('lang') || params.get('locale');
        if (lang) {
            return this.bestMatch(lang);
        }
        return null;
    }

    fallback() {
        return 'en-US';
    }

    // Find best match among supported locales
    bestMatch(locale) {
        if (this.supported.includes(locale)) {
            return locale;
        }

        // Try matching language only (e.g., 'es' matches 'es-ES')
        const lang = locale.split('-')[0];
        const match = this.supported.find(s => s.startsWith(lang));
        return match || null;
    }
}

const detector = new LocaleDetector(['en-US', 'es-ES', 'fr-FR']);
console.log('Detected locale:', detector.detect());