Управление переводами и плюрализация

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

Использование библиотеки svelte-i18n

Для реализации многоязычности в приложении на Svelte обычно используется сторонняя библиотека — svelte-i18n. Это одна из самых популярных библиотек для работы с локализацией в Svelte-приложениях. Она предоставляет удобный интерфейс для управления переводами, а также встроенную поддержку плюрализации, что делает её идеальным выбором для создания многоязычных приложений.

Установка библиотеки происходит с помощью npm или yarn:

npm install svelte-i18n

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

Настройка переводов

Для начала создаём файл переводов, например, en.json для английского языка:

{
  "greeting": "Hello, {name}!",
  "item_count": "{count} item|{count} items"
}

В файле переводов ключи соответствуют строкам, которые будут отображаться в приложении. Для использования этих переводов в Svelte, нужно импортировать и настроить библиотеку svelte-i18n.

В файле настройки i18n.js можно импортировать и настроить библиотеку следующим образом:

import { init, getLocaleFromNavigator } from 'svelte-i18n';
import en from './locales/en.json';

init({
  fallbackLocale: 'en',
  initialLocale: getLocaleFromNavigator(),
  formats: {
    // Форматы чисел, дат и валют
  },
  translations: {
    en
  }
});

Здесь getLocaleFromNavigator автоматически определяет язык системы пользователя, а fallbackLocale указывает язык по умолчанию, если перевод для выбранного языка не найден.

Плюрализация

Система плюрализации позволяет учитывать изменения в числе при переводе фраз. В разных языках правила формирования множественного числа могут существенно различаться. Например, в английском языке для чисел 1 используется форма в единственном числе, а для всех остальных чисел — форма во множественном.

В svelte-i18n плюрализация реализуется с использованием синтаксиса с вертикальной чертой |. Рассмотрим следующий пример:

{
  "item_count": "{count} item|{count} items"
}

В этом примере для одного предмета будет использована форма “item”, а для любого другого количества — “items”. Однако такая схема работает не во всех языках, и для некоторых требуется более сложная логика.

Пример для русского языка:

В русском языке нужно учитывать формы для 1, 2–4 и для всех остальных чисел. Для этого используем следующий синтаксис:

{
  "item_count": "{count} товар|{count} товара|{count} товаров"
}

Теперь, при отображении количества товаров, фраза будет изменяться в зависимости от числа:

  • 1 товар
  • 2–4 товара
  • 5 и более товаров

Для корректной работы с такими правилами необходимо использовать функцию плюрализации. В svelte-i18n можно настроить форматирование для разных чисел с помощью конфигурации formats.

import { addMessages, init, register } from 'svelte-i18n';

register('ru', {
  item_count: '{count} товар|{count} товара|{count} товаров'
});

addMessages('ru', {
  // Дополнительные переводы для русского языка
});

init({
  fallbackLocale: 'en',
  initialLocale: 'ru',
  formats: {
    // Плюрализация для русского языка
    number: {
      ru: {
        item_count: (count) => {
          if (count % 10 === 1 && count % 100 !== 11) {
            return `${count} товар`;
          } else if (count % 10 >= 2 && count % 10 <= 4 && (count % 100 < 10 || count % 100 >= 20)) {
            return `${count} товара`;
          } else {
            return `${count} товаров`;
          }
        }
      }
    }
  }
});

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

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

После того как переводы настроены, их можно использовать непосредственно в компонентах Svelte. Для этого библиотека предоставляет компонент <Trans> и функцию $t.

Пример использования компонента <Trans>:

<script>
  import { Trans } from 'svelte-i18n';
</script>

<p>
  <Trans message="greeting" values={{ name: 'Иван' }} />
</p>

В данном примере мы выводим строку “Hello, Иван!” или её эквивалент на другом языке, если пользователь выбрал неанглийский язык.

Также можно использовать функцию $t для более гибкого управления переводами:

<script>
  import { $t } from 'svelte-i18n';

  let count = 5;
</script>

<p>{$t('item_count', { count })}</p>

В этом примере будет выведена корректная форма в зависимости от значения переменной count. Если count равно 5, то текст будет выглядеть как “5 товаров”.

Ленивая загрузка переводов

Для оптимизации производительности можно загружать переводы только по мере необходимости. Это достигается с помощью асинхронной загрузки переводов, которая снижает размер начальной загрузки приложения.

Пример:

import { init, addMessages } from 'svelte-i18n';

init({
  fallbackLocale: 'en',
  initialLocale: 'ru',
  formats: {
    // Форматы
  }
});

const loadTranslations = async (locale) => {
  const translations = await import(`./locales/${locale}.json`);
  addMessages(locale, translations.default);
};

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

Заключение

Управление переводами и плюрализация в Svelte позволяет легко и гибко создавать многоязычные приложения. С помощью библиотеки svelte-i18n можно легко адаптировать интерфейс под разные языки, учитывая особенности склонений, числа и других языковых нюансов. Плюрализация, поддержка разных форм чисел и возможность асинхронной загрузки переводов делают Svelte мощным инструментом для создания глобализированных приложений.

Оглавление