Интернационализация форм

Интернационализация (i18n) форм — важная часть разработки современных веб-приложений, позволяющая пользователю взаимодействовать с интерфейсом на языке, наиболее удобном для него. В Svelte, благодаря своей простоте и декларативной природе, процесс интернационализации значительно упрощается. Для реализации поддержки нескольких языков необходимо позаботиться о нескольких аспектах: переводы текстов, адаптация форматов данных, обработка вводимых данных на разных языках и т. д.

Подготовка к интернационализации

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

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

npm install svelte-i18n

После установки библиотеки нужно настроить её в проекте. Создаётся файл для хранения переводов и инициализируется объект, отвечающий за переключение языков.

Пример настройки:

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

// Регистрируем переводы для различных языков
register('en', () => en);
register('ru', () => ru);

// Инициализируем i18n с автоматическим выбором языка
init({
  fallbackLocale: 'en',
  initialLocale: getLocaleFromNavigator(),
});

Этот код позволяет загружать переводы для английского и русского языков и автоматически устанавливать язык на основе предпочтений пользователя.

Структура файлов перевода

Файлы перевода обычно хранятся в формате JSON и содержат все ключи и значения для текстов на различных языках. Например, для английского и русского языков файлы могут выглядеть так:

en.json:

{
  "form": {
    "name": "Name",
    "email": "Email",
    "submit": "Submit"
  }
}

ru.json:

{
  "form": {
    "name": "Имя",
    "email": "Электронная почта",
    "submit": "Отправить"
  }
}

Каждый ключ, например, form.name, указывает на текст, который будет отображаться в соответствующем поле формы. Перевод будет автоматически подставляться в зависимости от выбранного языка.

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

После настройки библиотеки можно использовать переводы в компонентах Svelte. Для этого используется компонент $_ из библиотеки svelte-i18n, который позволяет обращаться к переводам.

Пример формы с интернационализацией:

<script>
  import { _, setLocale } from 'svelte-i18n';
  
  let name = '';
  let email = '';

  function handleSubmit() {
    // Логика отправки формы
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <div>
    <label for="name">{$_('form.name')}</label>
    <input id="name" type="text" bind:value={name} />
  </div>
  
  <div>
    <label for="email">{$_('form.email')}</label>
    <input id="email" type="email" bind:value={email} />
  </div>
  
  <button type="submit">{$_('form.submit')}</button>
</form>

<SELECT on:change={e => setLocale(e.target.value)}>
  <option value="en">English</option>
  <option value="ru">Русский</option>
</select>

В этом примере используется компонент формы, где метки и кнопка для отправки формы заменены на переведённые строки с помощью функции $_('form.name'). При изменении языка, срабатывает событие, которое вызывает функцию setLocale для смены текущего языка интерфейса.

Форматы данных и локализация

Кроме перевода строк, важно также учитывать локализацию чисел, дат и времени, которые могут отображаться в формах. Для этого часто используют библиотеки, такие как Intl (встроенная в JavaScript) или svelte-i18n, которая имеет поддержку форматов для чисел и дат.

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

<script>
  import { formatDate, formatNumber } FROM 'svelte-i18n';

  let date = new Date();
  let amount = 1234567.89;
</script>

<div>
  <p>{formatDate(date)}</p>  <!-- Форматированная дата -->
  <p>{formatNumber(amount)}</p>  <!-- Форматированное число -->
</div>

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

Адаптация ввода пользователя

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

Пример адаптации ввода чисел с учётом локализации:

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

  let numberInput = '';

  // Обработчик ввода числа с учетом локализации
  function handleNumberInput(event) {
    let value = event.target.value;
    // Убираем все символы, кроме цифр и разделителей
    value = value.replace(/[^\d,.]/g, '');
    numberInput = value;
  }
</script>

<input type="text" bind:value={numberInput} on:input={handleNumberInput} />

Здесь создается обработчик для числового ввода, который позволяет учитывать локальные разделители (например, для России это будет запятая, а для США — точка).

Использование фич Svelte для улучшения опыта

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

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

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

Заключение

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