Улучшить эту документациюМеждународная локализация (i18n) и локализация (l10n)
Международная локализация (i18n) — это процесс разработки продуктов таким образом, чтобы их можно было легко локализовать для различных языков и культур. Локализация (l10n) — это процесс адаптации приложений и текста для обеспечения их удобства использования в конкретном культурном или языковом рынке. Для разработчиков приложений международная локализация приложения означает абстрагирование всех строк и других элементов, зависящих от локали (например, форматов дат или валют) из приложения. Локализация приложения означает предоставление переводов и локальных форматов для абстрагированных элементов.
Как AngularJS поддерживает i18n/l10n?
AngularJS поддерживает i18n/l10n для фильтров даты, чисел и валюты.
Локализуемая множественная форма поддерживается посредством ngPluralize директивы. Кроме того, вы можете использовать расширения MessageFormat для $interpolate поддержки множественной формы и рода во всех интерполяциях посредством ngMessageFormat модуля.
Все локализуемые компоненты AngularJS зависят от наборов правил, специфичных для локали, управляемых службой $locale.
Несколько примеров, демонстрирующих использование фильтров AngularJS с различными наборами правил локализации, можно найти в каталоге i18n/e2e исходного кода AngularJS.
Что такое идентификатор локали?
Локаль — это конкретная географическая, политическая или культурная область. Наиболее часто используемый идентификатор локали состоит из двух частей: кода языка и кода страны. Например, en-US, en-AU, и zh-CN — все допустимые идентификаторы локали, которые содержат как коды языка, так и коды стран. Поскольку указание кода страны в идентификаторе локали необязательно, идентификаторы локали, такие как en, zh, и sk, также являются допустимыми. Дополнительную информацию об использовании идентификаторов локали см. на веб-сайте ICU.
Поддерживаемые локали в AngularJS
AngularJS разделяет наборы правил форматов чисел и дат по разным файлам, каждый файл для конкретной локали. Список поддерживаемых локалей можно найти здесь.
Предоставление правил локали AngularJS
Существует два подхода к предоставлению правил локализации AngularJS:
1. Предварительно собранные наборы правил
Вы можете предварительно собрать необходимый файл локали с AngularJS, конкатенировав содержимое файла, специфичного для локали, в конец файла 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, AngularJS автоматически настраивается с правилами локализации для немецкой локали.
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 ) может быть медленнее, поскольку необходимо загрузить дополнительный скрипт.
Ограничения
Хотя AngularJS упрощает i18n, есть несколько моментов, о которых вам нужно помнить при разработке приложения.
Символ валюты
Фильтр валюты AngularJS позволяет использовать символ валюты по умолчанию из службы локали locale service, или вы можете предоставить фильтру пользовательский символ валюты.
Предположим, вы создаете приложение банка и хотите отобразить баланс счета в 1000 долларов. Вы записываете следующую привязку, используя фильтр валюты:
{{ 1000 | currency }}
Если в настоящее время приложение находится в локали en-US, браузер отобразит $1000.00. Если кто-то в японской локали (ja) просмотрит ваше приложение, браузер отобразит баланс в ¥1000.00 вместо этого. Это проблема, так как $1000 не равно ¥1000.
В этом случае необходимо переопределить символ валюты по умолчанию, предоставив фильтру валюты currency символ валюты в качестве параметра.
Если мы изменим это на {{ 1000 | currency:"USD$"}}, AngularJS всегда будет отображать баланс USD$1000 независимо от локали.
Длина перевода
Длины переведенных строк/форматов дат могут сильно отличаться. Например, June 3, 1977 будет переведено на испанский как 3 de junio de 1977.
При международной локализации приложения вам необходимо провести тщательное тестирование, чтобы убедиться, что компоненты пользовательского интерфейса ведут себя ожидаемо, даже когда их содержимое сильно различается по размеру.
Часовые пояса
Фильтр даты AngularJS использует настройки часового пояса браузера. Одно и то же приложение будет отображать различную информацию о времени в зависимости от настроек часового пояса компьютера, на котором запущено приложение. Ни JavaScript, ни AngularJS в настоящее время не поддерживают отображение даты с часовым поясом, указанным разработчиком.
Расширения MessageFormat
Вы можете создавать локализуемые сообщения, основанные на множественном числе и роде, в выражениях интерполяции AngularJS и в $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 — это выражение, которое вычисляется до числового значения, на основе которого отображаемое сообщение должно изменяться в соответствии с правилами множественного числа.
После выражения AngularJS вы обозначаете синтаксис расширения множественного числа символом , plural, . Пробелы там необязательны.
За этим следует список ключевых слов выбора и соответствующих пар сообщений. Ключевое слово «other» и соответствующее сообщение являются обязательными, но вы можете иметь любое количество других категорий, если это необходимо.
Ключевые слова выбора
Ключевые слова выбора могут быть точными совпадениями или зависящими от языка категориями множественного числа.
Точные совпадения записываются как знак равенства, за которым следует точное значение. =0, =1, =2 и =123 — все примеры точных совпадений. Обратите внимание, что пробел между знаком равенства и числовым значением не должен быть.
Совпадения категорий множественного числа — это отдельные слова, соответствующие категориям множественного числа спецификации категории множественного числа CLDR. Эти категории зависят от локали. Например, локаль «en» (английский) определяет только «one» и «other», в то время как локаль «ga» (ирландский) определяет «one», «two», «few», «many» и «other». Как правило, вы просто пишете категории для вашего языка. Во время перевода переводчики будут добавлять или удалять больше категорий в зависимости от целевой локали.
Точные совпадения всегда имеют приоритет над совпадениями по ключевым словам. Следовательно, если вы определите как =0 , так и zero, когда значение выражения равно нулю, используется сообщение =0. (Дублирующиеся ключевые слова полезны при использовании необязательного синтаксиса offset , описанного ниже.)
Сообщения
Сообщения сразу следуют за ключевым словом выбора и необязательно предваряются пробелом. Они записываются в одинарных фигурных скобках ({}). В них могут быть использованы синтаксис интерполяции AngularJS. Кроме того, символ # — это заполнитель для фактического числового значения выражения.
{{numMessages, plural,
=0 {You have no new messages}
=1 {You have one new message}
other {You have # new messages}
}}
Поскольку эти сообщения сами могут содержать выражения AngularJS, вы также можете записать это следующим образом:
{{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 , соответствие работает следующим образом. Сначала точное значение выражения AngularJS сопоставляется с точными совпадениями (т. е. =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 — это выражение AngularJS, которое вычисляет пол человека, используемого для выбора сообщения, которое должно быть отображено.
Выражение AngularJS следует за , select, , где пробелы необязательны.
За этим следует список ключевых слов выбора и соответствующих пар сообщений. Ключевое слово «other» и соответствующее сообщение являются обязательными, но вы можете указать любое количество других значений пола, которые вам нужны (т. е. это не ограничено мужским/женским полом). Однако обратите внимание, что сопоставление чувствительно к регистру.
Ключевые слова выбора
Ключевые слова выбора — это простые слова, такие как «мужской» и «женский». Ключевое слово «other» и соответствующее сообщение являются обязательными, а другие — необязательными. Оно используется, когда выражение AngularJS не соответствует (без учёта регистра) ни одному из указанных ключевых слов.
Сообщения
Сообщения следуют непосредственно за ключевым словом выбора и необязательно предваряются пробелами. Они написаны в одинарных фигурных скобках ({}). Они могут содержать синтаксис интерполяции AngularJS внутри них.
{{friendGender, select,
male {Invite him}
female {Invite her}
other {Invite them}
}}
Вложенность
Как упоминалось в синтаксисе для множественного числа и выбора, вложенные сообщения могут содержать синтаксис интерполяции AngularJS. Поскольку вы можете использовать расширения MessageFormat в интерполяции AngularJS, это позволяет вкладывать выражения множественного числа и пола в любом порядке.
Обратите внимание, что если эти сообщения предназначены для переводчика и должны быть переведены, рекомендуется, чтобы сообщения отображались целиком, а не разбивались.
Демонстрация вложенности
Это взято из вышеприведённого примера.
{{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. Такой оператор запятой верхнего уровня в противном случае является недопустимым в выражении AngularJS и используется MessageFormat для указания функции (например, множественного числа/выбора) и её связанного синтаксиса.
Чтобы понять расширение, обратитесь к синтаксису ICU MessageFormat, описанному в документации ICU. В любом месте MessageFormat, где у вас есть обычный текст сообщения и вы хотите заменить выражение, просто поместите его в двойные фигурные скобки вместо одинарных фигурных скобок, которые диктует MessageFormat. Это имеет большое преимущество. Вы больше не ограничены простыми идентификаторами для подстановок. Поскольку вы используете двойные фигурные скобки, вы можете вставить любое произвольное выражение интерполяции, включая вложение других выражений MessageFormat!
Дополнительные материалы
Для получения более подробной информации, пожалуйста, обратитесь к нашему документу по проектированию. Вы можете узнать больше о синтаксисе ICU MessageFormat на странице форматирования сообщений | Руководство пользователя ICU.
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.
https://code.angularjs.org/1.8.2/docs/guide/i18n
