Форматирование для разных локалей

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

Основной принцип — вся текстовая информация (заголовки, описания, кнопки) передаётся вручную, что даёт полный контроль над локализацией.

Локализация текстового содержимого

Ключевые свойства для задания текста:

title — заголовок уведомления
message — основной текст
buttons — массив кнопок с пользовательскими подписями

Пример:

iziToast.show({
    title: 'Успех',
    message: 'Данные успешно сохранены'
});

Для английской локали:

iziToast.show({
    title: 'Success',
    message: 'Data has been saved successfully'
});

Централизация переводов

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

const translations = {
    ru: {
        successTitle: 'Успех',
        successMessage: 'Данные успешно сохранены'
    },
    en: {
        successTitle: 'Success',
        successMessage: 'Data has been saved successfully'
    }
};

Применение:

const lang = 'ru';

iziToast.show({
    title: translations[lang].successTitle,
    message: translations[lang].successMessage
});

Динамическая подстановка данных

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

const userName = 'Иван';

iziToast.show({
    title: 'Привет',
    message: `Добро пожаловать, ${userName}`
});

Для разных языков структура фразы может отличаться:

const translations = {
    ru: {
        welcome: (name) => `Добро пожаловать, ${name}`
    },
    en: {
        welcome: (name) => `Welcome, ${name}`
    }
};

iziToast.show({
    message: translations['en'].welcome('John')
});

Форматирование дат и времени

Для корректного отображения дат в разных локалях используется Intl.DateTimeFormat:

const date = new Date();

const formattedDate = new Intl.DateTimeFormat('ru-RU', {
    dateStyle: 'long',
    timeStyle: 'short'
}).format(date);

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

Для английской локали:

new Intl.DateTimeFormat('en-US', {
    dateStyle: 'long',
    timeStyle: 'short'
});

Форматирование чисел и валют

Используется Intl.NumberFormat:

const price = 123456.78;

const formatted = new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: 'RUB'
}).format(price);

iziToast.show({
    message: `Стоимость: ${formatted}`
});

Другие локали:

new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
});

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

Кнопки задаются массивом:

iziToast.show({
    message: 'Удалить файл?',
    buttons: [
        ['<button>Да</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }],
        ['<button>Нет</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }]
    ]
});

С переводами:

const translations = {
    ru: { yes: 'Да', no: 'Нет' },
    en: { yes: 'Yes', no: 'No' }
};

const lang = 'en';

iziToast.show({
    message: 'Delete file?',
    buttons: [
        [`<button>${translations[lang].yes}</button>`, function (instance, toast) {
            instance.hide({}, toast);
        }],
        [`<button>${translations[lang].no}</button>`, function (instance, toast) {
            instance.hide({}, toast);
        }]
    ]
});

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

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

iziToast.show({
    message: 'مرحبا بك',
    rtl: true
});

Свойство rtl: true:

меняет направление текста
корректирует выравнивание элементов
влияет на позиционирование иконок

Настройка глобальной локали

Через iziToast.settings можно задать базовые параметры:

iziToast.settings({
    timeout: 3000,
    position: 'topRight'
});

Для локализации удобно расширить:

const currentLang = 'ru';

const i18n = {
    ru: { position: 'topRight' },
    en: { position: 'topLeft' }
};

iziToast.settings(i18n[currentLang]);

Интеграция с i18n-библиотеками

Часто используется связка с библиотеками:

i18next
vue-i18n
react-intl

Пример с i18next:

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

Преимущества:

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

Множественные формы слов (pluralization)

В разных языках правила множественного числа отличаются:

const messages = {
    ru: (count) => {
        if (count === 1) return `${count} файл`;
        if (count < 5) return `${count} файла`;
        return `${count} файлов`;
    },
    en: (count) => `${count} file${count !== 1 ? 's' : ''}`
};

iziToast.show({
    message: messages
});

Кастомизация шаблонов уведомлений

Можно создавать функции-обёртки:

function showSuccess(lang) {
    const t = translations[lang];

    iziToast.success({
        title: t.successTitle,
        message: t.successMessage
    });
}

Форматирование HTML-контента

iziToast поддерживает HTML в message:

iziToast.show({
    message: '<b>Важно:</b> обновите страницу'
});

С локализацией:

const translations = {
    ru: '<b>Важно:</b> обновите страницу',
    en: '<b>Important:</b> refresh the page'
};

iziToast.show({
    message: translations['en']
});

Обработка смены языка на лету

При переключении языка:

let currentLang = 'ru';

function notify() {
    iziToast.show({
        message: translations[currentLang].successMessage
    });
}

currentLang = 'en';
notify();

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

1. Жёсткая привязка текста:

message: 'Operation successful'

2. Игнорирование форматов дат:

message: new Date().toString()

3. Отсутствие поддержки RTL

4. Некорректные формы множественного числа

Расширение функциональности

Для сложных сценариев создаётся слой-обёртка:

function notify(type, key, options = {}) {
    const lang = options.lang || 'ru';
    const text = translations[lang][key];

    iziToast[type]({
        title: text.title,
        message: typeof text.message === 'function'
            ? text.message(options)
            : text.message
    });
}

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

notify('success', 'saveSuccess', { lang: 'en' });

Стандартизация ключей перевода

Пример структуры:

{
    notification: {
        success: {
            title: '...',
            message: '...'
        }
    }
}