Улучшить эту документациюМеждународная локализация (i18n) и локализация (l10n)

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

Как Angular поддерживает i18n/l10n?

Angular поддерживает i18n/l10n для дат, чисел и валют.

Поддерживается локализуемая множественная форма через ngPluralize директиву. Кроме того, вы можете использовать расширения MessageFormat, чтобы $interpolate для локализуемой множественной формы и поддержки рода во всех интерполяциях через ngMessageFormat модуль.

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

В каталоге i18n/e2e кода Angular есть несколько примеров, демонстрирующих, как использовать фильтры Angular с различными наборами правил региональных настроек.

Что такое идентификатор региональных настроек?

Региональные настройки — это конкретный географический, политический или культурный регион. Наиболее часто используемый идентификатор региональных настроек состоит из двух частей: кода языка и кода страны. Например, en-US, en-AU, и zh-CN — это допустимые идентификаторы региональных настроек, которые содержат как коды языка, так и коды стран. Поскольку указание кода страны в идентификаторе региональных настроек необязательно, идентификаторы региональных настроек, такие как en, zh, и sk также допустимы. Подробнее об использовании идентификаторов региональных настроек см. на сайте ICU.

Поддерживаемые региональные настройки в Angular

Angular разделяет наборы правил для форматов чисел и дат на разные файлы, каждый файл — для конкретной региональной настройки. Список поддерживаемых региональных настроек можно найти здесь.

Обеспечение Angular правилами региональных настроек

Существует два подхода к предоставлению правил региональных настроек Angular:

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

Вы можете предварительно скомпоновать нужный файл региональных настроек с Angular, добавив содержимое файла, специфичного для региональных настроек, в конец файла angular.js или angular.min.js.

Например, в *nix, чтобы создать файл angular.js, содержащий правила локализации для немецкой региональной настройки, вы можете сделать следующее:

cat angular.js i18n/angular-locale_de-de.js > angular_de-de.js

При запуске приложения, содержащего angular_de-de.js скрипт вместо универсального скрипта angular.js, Angular автоматически настраивается с правилами локализации для немецкой региональной настройки.

2. Включение скрипта региональных настроек в index.html

Вы также можете включить специфичный для региональных настроек файл js в страницу index.html. Например, если клиенту требуется немецкая региональная настройка, вы должны отобразить index_de-de.html, который будет выглядеть примерно так:

<html ng-app>
 <head>
….
   <script src="angular.js"></script>
   <script src="i18n/angular-locale_de-de.js"></script>
….
 </head>
</html>

Сравнение двух подходов

Оба описанных выше подхода требуют подготовки разных index.html страниц или JavaScript-файлов для каждой региональной настройки, которые может использовать ваше приложение. Вам также необходимо настроить сервер для предоставления соответствующего файла, соответствующего требуемой региональной настройке.

Второй подход (включение файла JavaScript региональных настроек в index.html ) может быть медленнее, потому что необходимо загрузить дополнительный скрипт.

Рекомендации

Хотя Angular упрощает i18n, при разработке приложения следует учитывать несколько моментов.

Символ валюты

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

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

{{ 1000 | currency }}

Если в вашем приложении используется региональная настройка en-US, браузер отобразит $1000.00. Если кто-то в японской региональной настройке (ja) просмотрит ваше приложение, их браузер отобразит баланс ¥1000.00 вместо этого. Это проблематично, потому что 1000 долларов не равно 1000 иен.

В этом случае вам нужно переопределить символ валюты по умолчанию, предоставив фильтру currency валюты символ валюты в качестве параметра.

Если мы изменим вышеприведенное на {{ 1000 | currency:"USD$"}}, Angular всегда будет отображать баланс USD$1000 независимо от региональных настроек.

Длина перевода

Длины переведенных строк/форматов дат могут сильно различаться. Например, June 3, 1977 будет переведено на испанский как 3 de junio de 1977.

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

Временные зоны

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

Расширения MessageFormat

Вы можете записывать локализуемые сообщения, основанные на множественной форме и роде, в выражениях интерполяции Angular и $interpolate вызовах.

Это расширение синтаксиса предоставляется с помощью модуля ngMessageFormat, от которого ваше приложение может зависеть (отдельно поставляется как angular-message-format.min.js и angular-message-format.js). Ограничение текущего модуля ngMessageFormat заключается в том, что он не поддерживает переопределение начальных и конечных символов $interpolate. Разрешены только стандартные символы {{ и }}.

Расширение синтаксиса основано на подмножестве синтаксиса ICU MessageFormat, охватывающего множественные формы и выбор рода. Ссылка на дополнительные сведения см. в разделе «Дополнительное чтение» в конце этого раздела.

При чтении нижеследующих объяснений может быть полезно поэкспериментировать со следующим примером:

Синтаксис множественной формы

Синтаксис для выбора сообщения, основанного на множественной форме, выглядит следующим образом:

{{NUMERIC_EXPRESSION, plural,
    =0 {MESSAGE_WHEN_VALUE_IS_0}
    =1 {MESSAGE_WHEN_VALUE_IS_1}
    =2 {MESSAGE_WHEN_VALUE_IS_2}
    =3 {MESSAGE_WHEN_VALUE_IS_3}
    ...
    zero {MESSAGE_WHEN_PLURAL_CATEGORY_IS_ZERO}
    one {MESSAGE_WHEN_PLURAL_CATEGORY_IS_ONE}
    two {MESSAGE_WHEN_PLURAL_CATEGORY_IS_TWO}
    few {MESSAGE_WHEN_PLURAL_CATEGORY_IS_FEW}
    many {MESSAGE_WHEN_PLURAL_CATEGORY_IS_MANY}
    other {MESSAGE_WHEN_THERE_IS_NO_MATCH}
}}

Обратите внимание, что пробелы (включая переводы строк) обычно не имеют значения, за исключением случаев, когда они являются частью фактического текста сообщения, который находится в фигурных скобках. Пробелы обычно используются для улучшения читабельности.

Здесь NUMERIC_EXPRESSION — это выражение, которое вычисляется в числовое значение, на основе которого отображаемое сообщение должно изменяться в соответствии с правилами множественной формы.

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

За этим следует список ключевых слов выбора и соответствующих пар сообщений. Ключевое слово «other» и соответствующее сообщение являются **обязательными**, но вы можете иметь столько категорий, сколько вам нужно.

Ключевые слова выбора

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

Точные совпадения записываются в виде знака равенства, за которым следует точное значение. =0, =1, =2 и =123 — все примеры точных совпадений. Обратите внимание, что между знаком равенства и числовым значением не должно быть пробела.

Совпадения с категориями множественной формы — это отдельные слова, соответствующие категориям множественной формы спецификации категории множественной формы CLDR. Эти категории различаются в зависимости от региональных настроек. Например, региональные настройки «en» (английский) определяют только «one» и «other», в то время как региональные настройки «ga» (ирландский) определяют «one», «two», «few», «many» и «other». Как правило, вы просто пишете категории для своего языка. При переводе переводчики будут добавлять или удалять дополнительные категории в зависимости от целевой региональной настройки.

Точные совпадения всегда имеют приоритет над совпадениями ключевых слов. Таким образом, если вы определите как =0 и zero, при значении выражения ноль, будет выбрано сообщение =0. (Дублируемые категории ключевых слов полезны при использовании необязательного синтаксиса offset.)

Сообщения

Сообщения сразу следуют за ключевым словом выбора и необязательно предваряются пробелами. Они записываются в одиночных фигурных скобках ({}). В них могут содержаться синтаксические элементы интерполяции Angular. Кроме того, символ # является заполнительным для фактического числового значения выражения.

{{numMessages, plural,
      =0 {You have no new messages}
      =1 {You have one new message}
   other {You have # new messages}
}}

Поскольку эти сообщения сами могут содержать выражения Angular, вы также можете записать это следующим образом:

{{numMessages, plural,
      =0 {You have no new messages}
      =1 {You have one new message}
   other {You have {{numMessages}} new messages}
}}

Синтаксис множественной формы с необязательным смещением

Синтаксис множественной формы поддерживает необязательный синтаксис offset , используемый в сопоставлении. Проще объяснить это на примере.

{{recipients.length, plural, offset:1
    =0    {You gave no gifts}
    =1    {You gave {{recipients[0].name}} a gift}
    one   {You gave {{recipients[0].name}} and one other person a gift}
    other {You gave {{recipients[0].name}} and # other people a gift}
}}

Когда указано offset , сопоставление работает следующим образом. Сначала точное значение выражения Angular сравнивается с точными совпадениями (т. е. =N селекторами) для поиска совпадения. Если оно есть, используется это сообщение. Если совпадения нет, тогда значение смещения вычитается из значения выражения, и для этого нового значения применяются специфичные для региональных настроек правила множественной формы, чтобы получить его категорию множественной формы (такую как «one», «few», «many» и т. д.), и выполняется попытка сопоставления с ключевыми селекторами выбора, и используется соответствующее сообщение. Если совпадения нет, используется категория «other» (обязательная). Значение символа # внутри сообщения — это значение исходного выражения, уменьшенное на указанное значение смещения.

Экранирование/цитирование

Вам необходимо экранировать фигурные скобки или символ # внутри текстов сообщений, если вы хотите, чтобы они обрабатывались буквально, без специального значения. Вы можете заключить в кавычки/экранировать любой символ в тексте сообщения, поставив перед ним символ \ (обратный слэш). Символ обратного слэша удаляет любое специальное значение символа, который следует за ним непосредственно. Таким образом, вы можете экранировать или заключить в кавычки сам обратный слэш, поставив перед ним другой символ обратного слэша.

Синтаксис пола (select)

Поддержка пола обеспечивается более общим синтаксисом "select", который больше похож на оператор switch. Он достаточно универсален, чтобы поддерживать использование для сообщений, связанных с полом.

Синтаксис выбора сообщения, основанного на поле, выглядит следующим образом:

{{EXPRESSION, select,
    male {MESSAGE_WHEN_EXPRESSION_IS_MALE}
    female {MESSAGE_WHEN_EXPRESSION_IS_FEMALE}
    ...
    other {MESSAGE_WHEN_THERE_IS_NO_GENDER_MATCH}
}}

Обратите внимание, что пробелы (включая символы новой строки) обычно не имеют значения, за исключением случаев, когда они являются частью фактического текста сообщения, который находится в фигурных скобках. Пробелы обычно используются для улучшения читаемости.

Здесь EXPRESSION — это выражение Angular, которое вычисляется до пола человека, используемого для выбора сообщения, которое должно быть отображено.

За выражением Angular следует , select,, где пробелы являются необязательными.

За этим следует список ключевых слов выбора и соответствующих пар сообщений. Ключевое слово "other" и соответствующее сообщение являются обязательными, но вы можете иметь столько или так мало других значений пола, сколько вам нужно (т. е. это не ограничивается мужским/женским). Однако обратите внимание, что сопоставление выполняется с учетом регистра.

Ключевые слова выбора

Ключевые слова выбора — это простые слова, такие как "male" и "female". Ключевое слово "other" и соответствующее сообщение являются обязательными, а остальные — необязательными. Оно используется, когда выражение Angular не соответствует (без учета регистра) ни одному из других указанных ключевых слов.

Сообщения

Сообщения сразу следуют за ключевым словом выбора и необязательно предваряются пробелами. Они написаны в одинарных фигурных скобках ({}). Они могут содержать синтаксис интерполяции Angular внутри себя.

{{friendGender, select,
       male {Invite him}
     female {Invite her}
      other {Invite them}
}}

Вложенность

Как упоминалось в синтаксисе множественного и выбора, вложенные сообщения могут содержать синтаксис интерполяции Angular. Поскольку вы можете использовать расширения MessageFormat в интерполяции Angular, это позволяет вкладывать выражения множественного и пола в любом порядке.

Обратите внимание, что если эти сообщения предназначены для переводчика и должны быть переведены, рекомендуется, чтобы сообщения отображались целиком, а не были разделены.

Демонстрация вложенности

Это взято из приведенного выше примера.

{{recipients.length, plural, offset:1
    =0 {You ({{sender.name}}) gave no gifts}
    =1 { {{ recipients[0].gender, select,
              male {You ({{sender.name}}) gave him ({{recipients[0].name}}) a gift.}
              female {You ({{sender.name}}) gave her ({{recipients[0].name}}) a gift.}
              other {You ({{sender.name}}) gave them ({{recipients[0].name}}) a gift.}
          }}
       }
    one { {{ recipients[0].gender, select,
              male {You ({{sender.name}}) gave him ({{recipients[0].name}}) and one other person a gift.}
              female {You ({{sender.name}}) gave her ({{recipients[0].name}}) and one other person a gift.}
              other {You ({{sender.name}}) gave them ({{recipients[0].name}}) and one other person a gift.}
          }}
       }
    other {You ({{sender.name}}) gave {{recipients.length}} people gifts. }
}}

Отличия от синтаксиса ICU MessageFormat

Этот раздел будет полезен, если вы уже знакомы с синтаксисом ICU MessageFormat.

Это расширение синтаксиса, хотя и основано на MessageFormat, разработано для обратной совместимости с существующими выражениями интерполяции AngularJS. Основное правило таково: все интерполяции выполняются внутри двойных фигурных скобок. Оператор запятой верхнего уровня после выражения внутри двойных фигурных скобок приводит к распознаванию расширений MessageFormat. Такой оператор запятой верхнего уровня в противном случае является недопустимым в выражении Angular и используется MessageFormat для указания функции (например, множественного числа/выбора) и её связанного синтаксиса.

Чтобы понять расширение, ознакомьтесь с синтаксисом ICU MessageFormat, указанным в документации ICU. В любом месте MessageFormat, где у вас есть обычный текст сообщения, и вы хотите заменить выражение, просто поместите его в двойные фигурные скобки вместо одинарных фигурных скобок, которые диктует MessageFormat. Это имеет большое преимущество. Вы больше не ограничены простыми идентификаторами для замещений. Поскольку вы используете двойные фигурные скобки, вы можете вставить любое произвольное выражение интерполяции, включая вложенные выражения MessageFormat!

Дополнительная литература

Для получения более подробной информации, пожалуйста, обратитесь к нашей документации по проектированию. Вы можете узнать больше о синтаксисе ICU MessageFormat на странице форматирования сообщений | Руководство пользователя ICU.