Международализация (i18n) — это процесс адаптации приложения для разных языков и регионов. В Svelte для реализации i18n существуют различные подходы и стратегии. Основная цель этих стратегий — обеспечить возможность перевода текстов и локализации функционала приложения без потери производительности и качества кода.
Svelte является реактивным фреймворком, что означает, что изменение состояния автоматически обновляет представление. Это позволяет легко работать с переводами и динамическими данными, а также предоставляет возможности для гибкой локализации. Однако i18n в Svelte не является частью самого фреймворка и требует использования внешних библиотек или реализации собственного решения.
Для международализации в Svelte чаще всего применяются готовые
библиотеки. Некоторые из них интегрируются с фреймворком напрямую, а
другие требуют небольшой настройки. Рассмотрим два популярных решения:
svelte-i18n и svelte-intl-precompile.
svelte-i18n — это популярная библиотека для управления
локализацией в приложениях на Svelte. Она поддерживает переводы, форматы
даты и времени, а также валют и чисел. Библиотека позволяет загружать
переводы динамически и эффективно обновлять интерфейс при изменении
языка.
Основные принципы работы с svelte-i18n:
Конфигурация языков. Языки и переводы в
svelte-i18n хранятся в отдельных JSON-файлах. Пример
структуры:
{
"en": {
"greeting": "Hello, {name}!"
},
"ru": {
"greeting": "Привет, {name}!"
}
}Подключение библиотеки. В Svelte компоненте необходимо импортировать нужные функции и настроить языковые данные.
import { init, register, getLocaleFromNavigator } from 'svelte-i18n';
init({
fallbackLocale: 'en',
initialLocale: getLocaleFromNavigator(),
});
register('en', () => import('./locales/en.json'));
register('ru', () => import('./locales/ru.json'));Использование переводов в компонентах. Для
отображения переведенного текста применяется компонент
<i18n>:
<script>
import { _ } from 'svelte-i18n';
</script>
<p>{$_('greeting', { name: 'Алексей' })}</p>Динамическое изменение языка. Чтобы изменить
язык, можно воспользоваться функцией setLocale():
import { setLocale } from 'svelte-i18n';
setLocale('ru');svelte-intl-precompile — это другой подход, который
использует стандартный JavaScript API для работы с интернационализацией,
такой как Intl. Эта библиотека предназначена для компиляции
строк и использования их в Svelte компонентах на этапе сборки, что
позволяет избежать лишних вычислений во время работы приложения.
Особенности svelte-intl-precompile:
Предкомпиляция переводов. Переводы компилируются в JavaScript файлы, что снижает нагрузку на клиентскую часть.
Интеграция с Intl. Библиотека
поддерживает все возможности стандарта Intl, включая
форматирование чисел, дат и времени.
Конфигурация и использование. Пример работы с библиотекой:
import { createIntl } from 'svelte-intl-precompile';
import en from './locales/en.json';
import ru from './locales/ru.json';
const intl = createIntl({
en,
ru,
});Для использования перевода в компонентах достаточно вызвать функцию
intl() с ключом и параметрами.
<script>
import { intl } from './intl';
</script>
<p>{intl('greeting', { name: 'Мария' })}</p>Преимущества. Этот подход особенно удобен, если нужно работать с большими объемами переводов и минимизировать нагрузку на клиентскую сторону, так как все ресурсы переводов предварительно загружаются.
Если требуется больше контроля над процессом локализации или если библиотечные решения не подходят для конкретного проекта, можно реализовать международализацию вручную. В таком случае важно учесть несколько аспектов.
Для ручной реализации i18n можно использовать структуру, аналогичную приведенным выше JSON-файлам. Каждый перевод будет представлять собой объект, где ключи — это идентификаторы строк, а значения — переведенные тексты.
Пример структуры:
{
"en": {
"greeting": "Hello, {name}!"
},
"ru": {
"greeting": "Привет, {name}!"
}
}Реализовать динамическое изменение языка можно с помощью реактивных переменных в Svelte. Пример компонента, который отображает перевод в зависимости от выбранного языка:
<script>
let currentLanguage = 'en';
let translations = {
en: {
greeting: "Hello, {name}!"
},
ru: {
greeting: "Привет, {name}!"
}
};
function translate(key, params) {
let translation = translations[currentLanguage][key];
for (const param in params) {
translation = translation.replace(`{${param}}`, params[param]);
}
return translation;
}
function changeLanguage(lang) {
currentLanguage = lang;
}
</script>
<p>{translate('greeting', { name: 'Олег' })}</p>
<button on:click={() => changeLanguage('ru')}>Русский</button>
<button on:click={() => changeLanguage('en')}>English</button>Для полноценной локализации важно учитывать не только переводы, но и
форматирование чисел, дат, времени и валют. В JavaScript для этого можно
использовать стандарт Intl. Например, для форматирования
чисел можно использовать следующий подход:
const numberFormatter = new Intl.NumberFormat(currentLanguage);
const formattedNumber = numberFormatter.format(1234567.89);Для даты:
const dateFormatter = new Intl.DateTimeFormat(currentLanguage);
const formattedDate = dateFormatter.format(new Date());Международализация в Svelte — это важная часть процесса создания
приложений, ориентированных на глобальную аудиторию. Использование
готовых библиотек, таких как svelte-i18n или
svelte-intl-precompile, значительно упрощает этот процесс и
позволяет сфокусироваться на бизнес-логике приложения. Однако в
некоторых случаях может потребоваться ручная настройка, чтобы иметь
полный контроль над переводами и локализацией.