Localization (l10n)

Локализация (или l10n — сокращение от “localization”) представляет собой процесс адаптации приложения для работы с различными языками и культурами. В Ember.js существуют инструменты и практики для того, чтобы обеспечить поддержку различных языков и региональных стандартов, таких как формат даты, времени, чисел и валют.

Структура проекта для локализации

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

Проект с локализацией в Ember будет выглядеть следующим образом:

app/
  translations/
    en-us.json
    ru-ru.json
    fr-fr.json
  controllers/
  models/
  templates/
  ...
config/
  environment.js

Файлы с переводами хранятся в папке translations в виде JSON-файлов, где каждый файл соответствует одному языковому варианту. Пример содержимого такого файла:

{
  "greeting": "Hello, world!",
  "goodbye": "Goodbye, world!"
}

Установка и настройка ember-intl

Для начала необходимо установить зависимость ember-intl, которая предоставляет весь необходимый функционал для локализации в Ember:

ember install ember-intl

После этого следует настроить локализацию в проекте. Откройте файл config/environment.js и добавьте настройки, указывающие на используемую локаль по умолчанию:

module.exports = function(environment) {
  let ENV = {
    modulePrefix: 'your-app',
    environment,
    intl: {
      defaultLocale: 'en-us', // Устанавливаем локаль по умолчанию
      locales: ['en-us', 'ru-ru', 'fr-fr'] // Перечень поддерживаемых локалей
    }
  };

  return ENV;
};

Использование переводов в шаблонах

Теперь, когда система локализации настроена, можно использовать переводы в шаблонах Ember. Для этого в шаблон можно вставить хелпер {{t}}, который будет подставлять соответствующий перевод для указанного ключа:

<h1>{{t "greeting"}}</h1>

Если для текущей локали перевод не найден, будет использовано значение по умолчанию.

Переключение между локалями

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

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default Controller.extend({
  intl: service(),

  actions: {
    changeLanguage(language) {
      this.intl.setLocale(language);
    }
  }
});

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

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

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

  1. Числа и валюты — с помощью хелпера {{format-number}} можно отформатировать число в зависимости от текущей локали:

    {{format-number price currency="USD"}}

    Это отформатирует число в соответствии с правилами для валюты USD.

  2. Дата и время — с помощью хелпера {{format-date}} можно отображать дату в нужном формате:

    {{format-date date format="long"}}

    Форматы дат могут быть стандартными (например, short, medium, long) или пользовательскими, основанными на спецификациях ICU (International Components for Unicode).

  3. Продвинутые возможности — в случае необходимости можно использовать дополнительные параметры для более сложных вариантов форматирования, таких как отображение чисел с определенным количеством знаков после запятой, использование специфичных символов валют, работа с часами и минутами в формате 24 или 12.

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

В различных языках существуют разные правила для использования множественного числа. Ember.js через ember-intl позволяет настроить переводы с учетом этих правил. Пример использования:

{
  "message": {
    "count_one": "You have 1 message.",
    "count_other": "You have {{count}} messages."
  }
}

В шаблоне это будет выглядеть следующим образом:

{{t "message" count=model.messages.length}}

Когда количество сообщений будет равно 1, отобразится перевод count_one, а когда больше — count_other.

Поддержка форматирования чисел с учетом локалей

Каждая локаль может иметь свои особенности отображения чисел, даты и времени. ember-intl автоматически подстраивает вывод под текущую локаль, но также позволяет задавать дополнительные параметры. Например, для отображения числа в формате с тысячными разделителями:

{{format-number number useGrouping=true}}

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

Заключение

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

Оглавление