Говорим на одном языке: интернационализация JavaScript-приложений

Ваше приложение заговорит на любом языке мира

Представьте: вы создали крутой сервис, выложили его в сеть, а пользователи из Германии, Японии или Бразилии закрывают сайт через 10 секунд. Почему? Потому что они не понимают ни слова из того, что написано на кнопках. В эпоху глобализации интернационализация JavaScript — это не роскошь, а базовая необходимость. Если вы хотите, чтобы ваш продукт покорил мир (или хотя бы пару соседних стран), без i18n JavaScript вам не обойтись.

В этой статье мы разберем, как превратить обычное приложение в мультиязычного полиглота. Вы узнаете, какие библиотеки i18n существуют, как правильно организовать файлы с переводами, и напишем реальный код для интернационализации. Поехали!

Что такое интернационализация и зачем она нужна?

Технический термин i18n (где 18 — количество букв между первой "i" и последней "n") означает архитектурную подготовку приложения к работе с разными языками и культурами. Это не просто перевод слов — это адаптация форматов дат, чисел, валют, направлений текста (слева направо или справа налево) и даже цветовых схем.

Представьте себе дату "03/04/2025". Для жителя США это 3 апреля, а для европейца — 4 марта. А если ваше приложение показывает цену в долларах пользователю из Японии? Катастрофа. Интернационализация веб-приложений решает все эти проблемы на уровне кода.

Почему стоит начать прямо сейчас?

• Рост аудитории — 75% пользователей предпочитают покупать на родном языке
• SEO-буст — поисковики ранжируют мультиязычные сайты выше в локальных выдачах
• Юзабилити — снижение показателя отказов и увеличение времени на сайте

Основные подходы к i18n в JavaScript

Существует два глобальных подхода к локализации JavaScript: самописное решение и использование готовых библиотек. Мы рассмотрим оба, но настоятельно рекомендую второй вариант — меньше багов, больше фич.

Самописная интернационализация: базовый пример

Если ваше приложение — это простой лендинг на 10 строк, можно обойтись без библиотек. Создадим объект с переводами:

const translations = {
    ru: {
        greeting: "Привет, мир!",
        button: "Нажми меня"
    },
    en: {
        greeting: "Hello, World!",
        button: "Click me"
    },
    de: {
        greeting: "Hallo, Welt!",
        button: "Klick mich"
    }
};

Теперь функция для смены языка:

function translate(lang) {
    document.querySelectorAll('[data-i18n]').forEach(el => {
        const key = el.dataset.i18n;
        if (translations[lang] && translations[lang][key]) {
            el.textContent = translations[lang][key];
        }
    });
}

// Использование в HTML:
// <h1 data-i18n="greeting">Привет, мир!</h1>
// <button data-i18n="button">Нажми меня</button>

Это работает, но представьте, что у вас 500 строк текста, плюс нужно обрабатывать плюрализацию (1 яблоко, 2 яблока, 5 яблок) и интерполяцию (Привет, {username}). Тут и приходят на помощь библиотеки для интернационализации.

Топ библиотек i18n для JavaScript

Рынок i18n библиотек разнообразен. Вот три лидера, которые заслуживают вашего внимания:

1. i18next — король среди библиотек

i18next JavaScript — это стандарт де-факто. Работает с React, Vue, Angular и чистым JS. Поддерживает плюрализацию, интерполяцию, вложенные переводы и загрузку ресурсов по требованию.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
    resources: {
        en: {
            translation: {
                welcome: "Welcome back, {{name}}!",
                items: "You have {{count}} item",
                items_plural: "You have {{count}} items"
            }
        }
    },
    lng: 'en',
    fallbackLng: 'en'
});

// В компоненте React:
// <h1>{t('welcome', { name: 'John' })}</h1>
// <p>{t('items', { count: 5 })}</p>

2. Globalize — для сложных локалей

Если вам нужно форматировать валюты, даты и числа под конкретную культуру, Globalize — ваш выбор. Он использует данные Unicode CLDR, поэтому точность максимальная.

import Globalize from 'globalize';

const globalize = new Globalize('de-DE');
console.log(globalize.formatNumber(12345.67)); // "12.345,67"
console.log(globalize.formatDate(new Date(), { datetime: 'medium' })); // "3.4.2025, 14:30:00"

3. Polyglot.js — легковесный вариант

Для небольших проектов, где не нужна вся мощь i18next, подойдет Polyglot.js. Он весит всего 3 КБ и делает свою работу отлично.

import Polyglot from 'node-polyglot';

const polyglot = new Polyglot({ phrases: {
    hello: "Hello, %{name}!",
    click: "Click here |||| Click here, please"
}});

console.log(polyglot.t('hello', { name: 'Alice' })); // "Hello, Alice!"
console.log(polyglot.t('click', { smart_count: 2 })); // "Click here, please"

Практический пример: полноценная интернационализация с i18next

Давайте соберем небольшое приложение, которое поддерживает русский, английский и немецкий языки. Мы используем i18next с JSON-файлами переводов.

Шаг 1. Установка

npm install i18next i18next-http-backend i18next-browser-languagedetector

Шаг 2. Структура файлов переводов

Создайте папку locales с подпапками для каждого языка:

locales/
├── en/
│   └── translation.json
├── ru/
│   └── translation.json
└── de/
    └── translation.json

Пример en/translation.json:

{
    "app": {
        "title": "Internationalization Demo",
        "description": "This app supports multiple languages"
    },
    "user": {
        "greeting": "Hello, {{name}}!",
        "age": "You are {{age}} years old"
    },
    "items": {
        "one": "{{count}} item",
        "other": "{{count}} items"
    }
}