Многоязычность

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

Основные элементы, требующие локализации

В уведомлениях iziToast переводятся следующие части:

  • Заголовок (title)
  • Сообщение (message)
  • Текст кнопок (buttons)
  • Подсказки (timeoutProgressbar, close, aria-label и др.)

Все текстовые значения передаются вручную, что позволяет полностью контролировать язык отображения.

Базовый подход: хранение словаря переводов

Для реализации многоязычности создаётся объект с переводами:

const translations = {
  ru: {
    successTitle: "Успех",
    successMessage: "Операция выполнена успешно",
    errorTitle: "Ошибка",
    errorMessage: "Произошла ошибка"
  },
  en: {
    successTitle: "Success",
    successMessage: "Operation completed successfully",
    errorTitle: "Error",
    errorMessage: "An error occurred"
  }
};

Текущий язык задаётся отдельно:

let currentLang = 'ru';

Использование переводов в уведомлениях

iziToast.show({
  title: translations[currentLang].successTitle,
  message: translations[currentLang].successMessage,
  color: 'green'
});

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

Динамическое переключение языка

Изменение языка происходит путём обновления переменной:

function setLanguage(lang) {
  currentLang = lang;
}

После этого все последующие уведомления будут отображаться на выбранном языке.

Локализация кнопок

Кнопки в iziToast задаются массивом. Текст кнопок также берётся из словаря:

const translations = {
  ru: {
    ok: "ОК",
    cancel: "Отмена"
  },
  en: {
    ok: "OK",
    cancel: "Cancel"
  }
};

iziToast.show({
  title: "Confirm",
  message: "Are you sure?",
  buttons: [
    [
      `<button>${translations[currentLang].ok}</button>`,
      function (instance, toast) {
        instance.hide({ transitionOut: 'fadeOut' }, toast);
      }
    ],
    [
      `<button>${translations[currentLang].cancel}</button>`,
      function (instance, toast) {
        instance.hide({ transitionOut: 'fadeOut' }, toast);
      }
    ]
  ]
});

Интеграция с системами i18n

iziToast легко интегрируется с популярными библиотеками локализации:

  • i18next
  • vue-i18n
  • react-intl

Пример с i18next:

iziToast.show({
  title: i18next.t('notification.success.title'),
  message: i18next.t('notification.success.message')
});

В этом случае все переводы управляются внешней системой, а iziToast выступает только как отображающий слой.

Форматирование сообщений с параметрами

Для динамических сообщений используются шаблоны:

const translations = {
  ru: {
    welcome: "Добро пожаловать, {{name}}!"
  },
  en: {
    welcome: "Welcome, {{name}}!"
  }
};

function translate(key, params = {}) {
  let text = translations[currentLang][key];
  Object.keys(params).forEach(param => {
    text = text.replace(`{{${param}}}`, params[param]);
  });
  return text;
}

Использование:

iziToast.show({
  message: translate('welcome', { name: 'Алексей' })
});

Учет направления текста (RTL)

Для языков с направлением справа налево (например, арабский) необходимо:

  1. Установить соответствующий язык
  2. Добавить CSS-класс или стиль
document.body.dir = currentLang === 'ar' ? 'rtl' : 'ltr';

Также можно изменить позиционирование toast-уведомлений:

iziToast.show({
  position: currentLang === 'ar' ? 'topLeft' : 'topRight'
});

Локализация времени и форматов

iziToast не обрабатывает форматирование дат или чисел, поэтому используются стандартные API:

const date = new Date();

const formattedDate = new Intl.DateTimeFormat(currentLang).format(date);

iziToast.show({
  message: `Дата: ${formattedDate}`
});

Структурирование переводов

Для масштабируемых проектов рекомендуется разбивать переводы:

const translations = {
  ru: {
    notification: {
      success: {
        title: "Успех",
        message: "Данные сохранены"
      }
    }
  }
};

Доступ:

translations[currentLang].notification.success.title

Обработка отсутствующих переводов

Добавляется fallback-язык:

function getTranslation(key) {
  return translations[currentLang][key] 
      || translations['en'][key] 
      || key;
}

Производительность и кэширование

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

  • Кэшировать текущие значения
  • Минимизировать глубокие обращения к объектам
  • Использовать функции-обёртки

Поддержка множественного числа

Простая реализация:

const translations = {
  ru: {
    messages: {
      one: "1 сообщение",
      few: "{{count}} сообщения",
      many: "{{count}} сообщений"
    }
  }
};

function pluralize(count) {
  if (count === 1) return 'one';
  if (count >= 2 && count <= 4) return 'few';
  return 'many';
}

Использование:

const count = 5;

iziToast.show({
  message: translations[currentLang].messages[pluralize(count)].replace('{{count}}', count)
});

Вынос логики локализации

Создание отдельного модуля:

export function t(key, params) {
  // логика перевода
}

И использование:

iziToast.show({
  title: t('success.title'),
  message: t('success.message')
});

Тестирование многоязычности

Проверяется:

  • Корректность текста
  • Переключение языка без перезагрузки
  • Отображение длинных строк
  • RTL-поведение
  • Корректность параметров

Частые ошибки

  • Жёстко закодированные строки внутри вызовов iziToast
  • Отсутствие fallback-языка
  • Неправильная обработка параметров в шаблонах
  • Игнорирование длины текста (переполнение UI)
  • Отсутствие поддержки множественного числа

Практическая архитектура

Оптимальная схема:

  • Отдельный файл переводов
  • Универсальная функция t()
  • Глобальное состояние текущего языка
  • Интеграция с UI (переключатель языка)
  • Использование iziToast как слоя отображения

Такой подход обеспечивает гибкость, масштабируемость и удобство поддержки многоязычного интерфейса.

Оглавление