Интерполяция переменных

Интерполяция представляет собой механизм подстановки динамических значений в переводы. Она позволяет формировать строки, которые зависят от состояния приложения, данных пользователя или бизнес-логики, при этом сохраняя текстовые ресурсы структурированными и переиспользуемыми.

Основная идея заключается в том, что перевод содержит шаблон с плейсхолдерами, а при выполнении подставляются конкретные значения.

Базовый синтаксис интерполяции

В ресурсах переводов используются фигурные скобки:

{
  "welcome": "Привет, {{name}}!"
}

При вызове:

i18next.t('welcome', { name: 'Алексей' });

результат:

Привет, Алексей!

Механизм интерполяции работает на уровне строки, заменяя все совпадения {{ключ}} значениями из объекта параметров.

Множественные переменные

Один перевод может содержать несколько интерполируемых значений:

{
  "order": "Заказ №{{id}} на сумму {{price}} ₽"
}
i18next.t('order', { id: 4578, price: 1290 });

Результат:

Заказ №4578 на сумму 1290 ₽

Подстановка выполняется независимо для каждого ключа.

Значения по умолчанию

При отсутствии переданного параметра используется пустая строка или явно заданное значение через fallback-структуру:

{
  "greeting": "Здравствуйте, {{name}}!"
}
i18next.t('greeting');

Результат:

Здравствуйте, !

Для предотвращения подобных ситуаций применяется конструкция с дефолтным значением:

{
  "greeting": "Здравствуйте, {{name, пользователь}}!"
}

Вложенные ключи и доступ к объектам

Интерполяция поддерживает обращение к вложенным структурам данных:

i18next.t('user', {
  user: {
    profile: {
      name: 'Мария'
    }
  }
});

Ресурс:

{
  "profile": "Имя пользователя: {{user.profile.name}}"
}

Результат:

Имя пользователя: Мария

Доступ осуществляется через точечную нотацию.

Экранирование значений

По умолчанию интерполируемые значения экранируются для защиты от XSS-уязвимостей:

{
  "text": "Комментарий: {{value}}"
}

Если значение содержит HTML:

i18next.t('text', { value: '<script>alert(1)</script>' });

результат будет экранирован:

Комментарий: &lt;script&gt;alert(1)&lt;/script&gt;

Параметр escapeValue управляет этим поведением:

i18next.init({
  interpolation: {
    escapeValue: false
  }
});

Отключение экранирования применяется в средах, где HTML обрабатывается отдельно (например, React уже выполняет защиту на уровне виртуального DOM).

Форматирование значений

Интерполяция поддерживает преобразование значений через форматтеры.

Базовое форматирование

{
  "price": "Цена: {{value, currency}}"
}
i18next.init({
  interpolation: {
    format: (value, format) => {
      if (format === 'currency') {
        return `${value} ₽`;
      }
      return value;
    }
  }
});

Результат:

Цена: 1000 ₽

Разделитель форматов

При необходимости комбинирования форматов используется formatSeparator:

{
  "date": "{{value, datetime, short}}"
}
i18next.init({
  interpolation: {
    formatSeparator: ','
  }
});

Встраивание функций форматирования

Форматтер может учитывать тип данных:

function format(value, format) {
  switch (format) {
    case 'uppercase':
      return String(value).toUpperCase();
    case 'lowercase':
      return String(value).toLowerCase();
    default:
      return value;
  }
}
i18next.init({
  interpolation: {
    format
  }
});
{
  "title": "{{name, uppercase}}"
}

Нестинг переводов внутри интерполяции

Интерполяция может комбинироваться с вложенными ключами перевода через $t:

{
  "inner": "мир",
  "outer": "Привет, $t(inner)!"
}

Результат:

Привет, мир!

Такой подход позволяет строить составные строки без дублирования текста.

Интерполяция массивов и сложных структур

Массивы подставляются после преобразования в строку:

i18next.t('list', { items: ['яблоко', 'груша', 'слива'] });
{
  "list": "Список: {{items}}"
}

Результат:

Список: яблоко,груша,слива

Для более контролируемого вывода применяется предварительная обработка данных через форматтер.

Интерполяция в различных окружениях

Node.js

Работа интерполяции идентична базовой конфигурации, так как отсутствует DOM-слой.

Browser

Особое значение имеет экранирование HTML, предотвращающее внедрение скриптов.

React-интеграция

В связке с React интерполяция часто комбинируется с компонентами:

<t i18nKey="welcome" values={{ name: 'Иван' }} />

React дополнительно обрабатывает вывод, снижая необходимость ручного экранирования.

Порядок обработки интерполяции

Внутренний процесс включает несколько этапов:

  1. Получение строки перевода по ключу
  2. Поиск интерполяционных выражений {{...}}
  3. Извлечение значений из объекта параметров
  4. Применение форматтеров
  5. Экранирование (при включённой опции)
  6. Формирование итоговой строки

Последовательность важна при комбинировании форматирования и вложенных ключей.

Производственные особенности

При интенсивном использовании интерполяции учитываются следующие факторы:

  • количество замен напрямую влияет на производительность рендера
  • глубокие объекты увеличивают стоимость разрешения ключей
  • функции форматирования вызываются для каждого совпадения
  • кэширование переводов снижает нагрузку при повторных вызовах

Оптимизация достигается за счёт упрощения структуры интерполяции и минимизации вложенности объектов.

Оглавление