Разработка сайтов в Дзержинске, ДНР. Что такое API интернационализации JavaScript (I18n)?

 
 

Английский — самый распространенный язык в мире, но на нем говорит только каждый седьмой человек. Это первый (родной) язык 379 миллионов человек, но 917 миллионов говорят на китайском, 460 миллионов говорят на испанском, а 341 миллион говорят на хинди.

Многие не говорящие по-английски проживают на развивающихся рынках с экспоненциальным ростом Интернета. Если ваше веб-приложение может быть переведено во всем мире, ваш потенциальный целевой рынок может увеличиться на 700%!

API интернационализации JavaScript (также известный как i18n) позволяет разрабатывать веб-страницы и приложения таким образом, чтобы их можно было легко адаптировать для удовлетворения потребностей пользователей, говорящих на разных языках.

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

Интернационализация (I18n) может быть сложной

Интернационализация выглядит просто... пока вы не попытаетесь это сделать.

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

Испанский: nombre, электронная почта, fecha

Французский: имя, электронная почта, дата

Немецкий: имя, электронная почта, датум

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

В более простых случаях вы можете использовать некоторую форму токенизации. Например, возьмите HTML-шаблон, содержащий следующее:

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

Могут быть разные вариации одного и того же языка. Испанский, на котором говорят в Испании, не идентичен тому, на котором говорят в Южной Америке.

Слова в одном языке могут быть значительно длиннее в другом. Например, «email» переводится как «электронное письмо» на русском языке.

Текст не всегда ориентирован слева направо. Некоторые написаны справа налево — например, арабский, иврит, курдский и идиш. Другие могут быть написаны сверху вниз, например, китайский, корейский, японский и тайваньский.

Многие проблемы можно решить, сократив текст до минимума и применив свойства CSS, такие как direction, writing-mode, и логические размеры для макета.

Терминология

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

Рассмотрим дату, показанную как «03.12.24». Он будет читаться как:

«3 декабря 2024 года» жителей США, использующих формат MDY.

«12 марта 2024 г.» от жителей Европы, Южной Америки и Азии, использующих формат DMY, и

«24 марта 2012 г.» от жителей Канады, Китая, Японии и Венгрии, выбравших значительно более практичный формат YMD.

(Имейте в виду, что косая черта в качестве разделителя даты используется не во всех языках!)

Число «1000» будет читаться как:

«одна тысяча» в США, Великобритании, Канаде, Китае и Японии, и

«один (целая ноль)» в Испании, Франции, Германии и России, где десятичная дробь числа отделяется запятой.

Ситуация может быть сложной даже на одном английском языке. Термин «1000 метров» означает:

1 километр (или 0,62 мили) для жителей США

коллекция из тысячи измерительных приборов для жителей Великобритании, Канады и Австралии!

Международный API JavaScript

Малоизвестный Intlобъект JavaScript реализует API интернационализации ECMAScript в большинстве современных браузеров и сред выполнения. Поддержка в целом хорошая, и даже в IE11 есть много более полезных методов. Для старых браузеров есть polyfill, и API можно обнаружить так:

if (window.Intl) {

// Intl supported

}

API немного необычный. Он предоставляет несколько конструкторов объектов для дат, времени, чисел и списков, которым передается локаль и необязательный объект, содержащий параметры конфигурации. Например, вот DateTimeобъект, определяющий английский язык США:

const dateFormatter = new Intl.DateTimeFormat ('en-US’) ;

Этот объект можно использовать любое количество раз для вызова различных методов, которым передается Date () значение (или Temporal ES6, если он доступен). Метод formatобычно является наиболее практичным вариантом. Например:

const valentinesDay = dateFormatter.format (new Date ('2022-02-14'));

// returns US format «2/14/2022»

const starwarsDay = dateFormatter.format (new Date ('2022-05-04'));

// returns US format «5/4/2022»

Кроме того, вы можете создать Intlобъект и запустить метод в одной строке кода:

const starwarsDay = new Intl.DateTimeFormat ('en-US’).format (new Date ('2022-05-04'));

Помимо format () метода, некоторые объекты поддерживают их:

formatToParts (): возвращает массив объектов, содержащих отформатированные строки, например{ type: 'weekday’, value: 'Monday’ }

resolvedOptions (): возвращает новый объект со свойствами, отражающими используемый языковой стандарт и параметры форматирования, например dateFormatter.resolvedOptions ().locale.

Определение локалей

Все Intlобъекты требуют аргумента локали. Это строка, которая идентифицирует:

языковой подтег

вложенный тег скрипта (необязательно)

вложенный тег региона (или страны) (необязательно)

один или несколько вариантов вложенных тегов (необязательно)

одна или несколько последовательностей расширения BCP 47 (необязательно)

последовательность расширения для частного использования (необязательно)

Часто бывает достаточно языка и региона. Например, «en-US», «fr-FR», и так далее.

Помимо использования строки, Intl.localeобъект можно использовать для создания локалей, таких как английский США с 12-часовым форматом времени:

const us = new Intl.Locale ('en’, {

region: 'US’, hourCycle: 'h12', calendar: 'gregory’

}) ;

Это можно использовать в другом Intlконструкторе. Например:

new Intl.DateTimeFormat (us, { timeStyle: 'medium’ })

.format (new Date ('2022-05-04T13:00:00'));

// «1:00:00 PM»

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

new Intl.DateTimeFormat ().format (new Date ('2022-05-04'));

Это возвращается «5/4/2022»на устройстве с настройками для США и «04/05/2022„на устройстве с настройками для Великобритании.

Даты и время

Следующий инструмент показывает примеры дат и времени, отформатированных с помощью (извините, если вашего языка или региона нет в списке!): Intl.DateTimeFormat ()

Конструктору передается локаль и объект опций. У этого есть много возможных свойств, хотя вам редко требуется больше, чем dateStyleand/or timeStyle:

свойство описание

dateStyle стиль даты:“full» «long» «medium» «short»

timeStyle стиль времени:«full» «long» «medium» «short»

calendar варианты включают: «chinese» «gregory» «hebrew» «indian» «islamic„и т. д.

dayPeriod выражения периода:“narrow» «short» «long»

numberingSystem система нумерации: «arab» «beng» «fullwide» «latn„и т. д.

localeMatcher Алгоритм сопоставления локали:“lookup» «best fit»

timeZone часовой пояс: «America/New_York» «Europe/Paris„и т. д.

hour12 установить true12-часовую нотацию времени

hourCycle часовой цикл:“h11» «h12» «h23» «h24»

formatMatcher алгоритм сопоставления форматов:«basic» «best fit»

weekday формат дня недели:«long» «short» «narrow»

era формат эпохи:«long» «short» «narrow»

year формат года:«numeric» «2-digit»

month формат месяца:«numeric» «2-digit» «long» «short» «narrow»

day дневной формат:«numeric» «2-digit»

hour формат часов:«numeric» «2-digit»

minute минутный формат:«numeric» «2-digit»

second второй формат:«numeric» «2-digit»

timeZoneName либо:«long» «short»

Примеры:

// Japanese short date, no time: «2022/05/04»

new Intl.DateTimeFormat («ja-JP», { dateStyle: «short» })

.format (new Date («2022-05-04T13:00»));

// US short date and time: «5/4/22, 1:00 PM»

new Intl.DateTimeFormat («en-US», { dateStyle: «short», timeStyle: «short» })

.format (new Date («2022-05-04T13:00»));

// UK long date, short time: «4 May 2022 at 13:00»

new Intl.DateTimeFormat («en-GB», { dateStyle: «long», timeStyle: «short» })

.format (new Date («2022-05-04T13:00»));

// Spanish full date and time (dependent on your local time zone)

// «miércoles, 4 de mayo de 2022, 13:00:00 (hora de verano británica)»

new Intl.DateTimeFormat («es-ES», { dateStyle: «full», timeStyle: «full» })

.format (new Date («2022-05-04T13:00»));

Диапазоны дат

Метод formatRange () принимает две даты и форматирует период наиболее кратким образом в зависимости от локали и параметров. Например:

// result: «4 May 2022, 13:00–14:00»

new Intl.DateTimeFormat («en-US», { dateStyle: «long», timeStyle: «short» })

.formatRange (new Date («2022-05-04T13:00»), new Date («2022-05-04T14:00»))

Этот метод имеет более ограниченную поддержку браузера, но был реализован в Chrome 76.

Относительные периоды

Объект Intl.RelativeTimeFormat () может отображать периоды относительно этого момента времени. Объект параметров имеет меньше параметров:

свойство описание

localeMatcher Алгоритм сопоставления локали:«lookup» «best fit»

numeric либо «always», например, «1 day ago»либо «auto», например«yesterday»

style формат:«long» «short» «narrow»

Методу передается числовое значение и единица измерения format ():«year», «quarter», «month», «week», «day», «hour», «minute», or «second». Примеры:

// US 1 day ago, numeric: «1 day ago»

new Intl.RelativeTimeFormat («en-US»)

.format (-1, «day») ;

// US in one 1 day, auto: «tomorrow»

new Intl.RelativeTimeFormat («en-US», { numeric: «auto» })

.format (-1, «day») ;

// German, next month auto: «nächsten Monat»

new Intl.RelativeTimeFormat («de-DE», { numeric: «auto» })

.format (1, «month») ;

Числа, валюта, проценты и единицы

Следующий инструмент показывает примеры использования Intl.NumberFormat () для форматирования чисел, валют, процентов и единиц измерения:

Конструктору передается локаль и объект параметров:

свойство описание

numberingSystem опции включают в себя «arab» «beng» «deva» «fullwide» «latn„и т. д.

notation тип:“standard» «scientific» «engineering» «compact»

style форматирование: «decimal» «currency» «percent» «unit»— это определяет, какие другие параметры могут быть установлены

currency код валюты: «USD» «EUR» «GBP„и т. д.

currencyDisplay формат валюты:“symbol» «narrowSymbol» «code» «name»

currencySign для отрицательных значений валюты «standard»знак минус или «accounting»скобки

unit тип устройства: «centimeter» «inch» «hour„и т. д.

unitDisplay формат блока:“long» «short» «narrow»

useGrouping установите false, чтобы отключить разделители тысяч

minimumIntegerDigits минимальное количество целых цифр

minimumFractionDigits минимальное количество цифр дроби

maximumFractionDigits максимальное количество цифр дроби

minimumSignificantDigits минимальное количество значащих цифр

maximumSignificantDigits максимальное количество значащих цифр

Примеры:

// US number rounded to 2 decimal places: «12,345.68»

new Intl.NumberFormat («en-US», { maximumSignificantDigits: 2 })

.format (12345.6789) ;

// French number rounded to 3 decimal places: «12 345,689»

new Intl.NumberFormat («fr-FR», { maximumSignificantDigits: 3 })

.format (12345.6789) ;

// US compact number, 0 decimal places: «12K»

new Intl.NumberFormat («en-US», { notation: «compact», maximumSignificantDigits: 0 })

.format (12345.6789) ;

// Spanish US dollar value: «12.345,68 US$»

new Intl.NumberFormat («es-ES», {

style: «currency»,

currency: «USD»,

currencyDisplay: «symbol»

})

.format (12345.6789) ;

// UK meters in long format, 0 decimal places: «12,346 metres»

new Intl.NumberFormat («en-GB», {

maximumSignificantDigits: 0,

style: «unit»,

unit: «meter»,

unitDisplay: «long»

})

.format (12345.6789) ;

Списки

Объект Intl.ListFormat () может форматировать массив элементов в список с учетом языка. В английском языке для этого обычно требуется «и» или «или» перед последним элементом.

Объект параметров может устанавливать следующие свойства:

свойство описание

type формат вывода: «conjunction„для списков на основе и“disjunction», для списков на основе или

style форматирование:«long» «short» «narrow»

Примеры:

const browsers = ['Chrome’, 'Firefox’, 'Edge’, 'Safari’];

// US English: «Chrome, Firefox, Edge, and Safari»

new Intl.ListFormat («en-US», { type: «conjunction» }).format (browsers) ;

// US English: «Chrome, Firefox, Edge, or Safari»

new Intl.ListFormat («en-US», { type: «disjunction» }).format (browsers) ;

// French: «Chrome, Firefox, Edge, et Safari»

new Intl.ListFormat («fr-FR», { type: «conjunction» }).format (browsers) ;

// French: «Chrome, Firefox, Edge, ou Safari»

new Intl.ListFormat («fr-FR», { type: «disjunction» }).format (browsers) ;

множественное число

Немного странный Intl.PluralRules () объект включает языковые правила с учетом множественного числа, когда у вас есть несколько элементов. Объект параметров может установить для typeсвойства одно из следующих значений:

cardinal: количество вещей (по умолчанию) или

ordinal: ранжирование вещей, таких как 1st, 2nd, или 3rdна английском языке

Метод возвращает строку на английском языке select (), представляющую категорию множественного числа: либо zero, one, two, few, manyлибо other.

Примеры:

// US English zero cardinal: «other»

new Intl.PluralRules («en-US», { type: «cardinal» }).select (0) ;

// US English zero ordinal: «other»

new Intl.PluralRules («en-US», { type: «ordinal» }).select (0) ;

// US English 1 cardinal: «one»

new Intl.PluralRules («en-US», { type: «cardinal» }).select (1) ;

// US English 1 ordinal: «one»

new Intl.PluralRules («en-US», { type: «ordinal» }).select (1) ;

// US English 2 cardinal: «other»

new Intl.PluralRules («en-US», { type: «cardinal» }).select (2) ;

// US English 2 ordinal: «two»

new Intl.PluralRules («en-US», { type: «ordinal» }).select (2) ;

// US English 3 cardinal: «other»

new Intl.PluralRules («en-US», { type: «cardinal» }).select (3) ;

// US English 3 ordinal: «few»

new Intl.PluralRules («en-US», { type: «ordinal» }).select (3) ;

Сравнение строк

Наконец, Intl.Collator () объект позволяет сравнивать строки с учетом языка. Его объект параметров может устанавливать следующие свойства:

свойство описание

collation вариант сортировки для определенных локалей

numeric установить trueчисловое сопоставление, где «1» < «2» < «10»

caseFirst либо «upper»или «lower»регистр сначала

usage либо строка «sort» (по умолчанию), либо«search»

sensitivity «base» «accent» «case» «variant»сравнения

ignorePunctuation установить trueигнорирование знаков препинания

Метод compare () сравнивает две строки. Например:

// German: returns 1

new Intl.Collator ('de’).compare ('z’, 'ä') ;

Выгода!

Если вы используете JavaScript для отображения данных, должно быть просто показать информацию, используя локальный формат пользователя. Например, следующий код определяет dateFormat () функцию, которая использует Intlкраткий формат даты или возвращается к формату ГГГГ-ММ-ДД, если он не поддерживается:

// date formatting function

const dateFormat = (Intl && Intl.DateTimeFormat?

date => new Intl.DateTimeFormat ({ dateStyle: 'short’ }).format (date):

date => date.toISOString ().slice (0, 10)

) ;

// insert today’s date into DOM #today element

document.getElementById ('today’).textContent = dateFormat (new Date ());

Само по себе это не сделает ваше приложение легким для международной аудитории, но сделает его на один шаг ближе к глобальному распространению.

3D-печать5GABC-анализAndroidAppleAppStoreAsusCall-центрChatGPTCRMDellDNSDrupalExcelFacebookFMCGGoogleHuaweiInstagramiPhoneLinkedInLinuxMagentoMicrosoftNvidiaOpenCartPlayStationPOS материалPPC-специалистRuTubeSamsungSEO-услугиSMMSnapchatSonyStarlinkTikTokTwitterUbuntuUp-saleViasatVPNWhatsAppWindowsWordPressXiaomiYouTubeZoomАвдеевкаАктивные продажиАкцияАлександровск ЛНРАлмазнаяАлчевскАмвросиевкаАнализ конкурентовАнализ продажАнтимерчандайзингАнтрацитАртемовскАртемовск ЛНРАссортиментная политикаБелгородБелицкоеБелозерскоеБердянскБизнес-идеи (стартапы)БрендБрянкаБукингВахрушевоВендорВидеоВикипедияВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВолновахаВоронежГорловкаГорнякГорскоеДебальцевоДебиторкаДебиторская задолженностьДезинтермедитацияДзержинскДивизионная система управленияДизайнДимитровДирект-маркетингДисконтДистрибьюторДистрибьюцияДобропольеДокучаевскДоменДружковкаЕкатеринбургЕнакиевоЖдановкаЗапорожьеЗимогорьеЗолотоеЗоринскЗугрэсИжевскИловайскИрминоКазаньКалининградКировскКировскоеКомсомольскоеКонстантиновкаКонтент-маркетингКонтент-планКопирайтингКраматорскКрасноармейскКрасногоровкаКраснодарКраснодонКраснопартизанскКрасный ЛиманКрасный ЛучКременнаяКураховоКурскЛисичанскЛуганскЛутугиноМакеевкаМариупольМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМарьинкаМедиаМелекиноМелитопольМенеджментМерчандайзерМерчандайзингМиусинскМолодогвардейскМоскваМоспиноНижний НовгородНиколаевНиколаевкаНишевой маркетингНовоазовскНовогродовкаНоводружескНовосибирскНумерическая дистрибьюцияОдессаОмскОтдел маркетингаПартизанский маркетингПервомайскПеревальскПетровскоеПлата за кликПоисковая оптимизацияПопаснаяПравило ПаретоПривольеПрогнозирование продажПродвижение сайтов в ДонецкеПроизводство видеоПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРазработка приложенийРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРовенькиРодинскоеРостов-на-ДонуРубежноеСамараСанкт-ПетербургСаратовСватовоСвердловскСветлодарскСвятогорскСевастопольСеверодонецкСеверскСедовоСейлз промоушнСелидовоСимферопольСинергияСколковоСлавянскСнежноеСоздание сайтов в ДонецкеСоледарСоциальные сетиСочиСтаробельскСтаробешевоСтахановСтимулирование сбытаСуходольскСчастьеТелемаркетингТельмановоТираспольТорговый представительТорезТрейд маркетингТрейд промоушнТюменьУглегорскУгледарУкраинскХабаровскХарцызскХерсонХостингЦелевая аудиторияЦифровой маркетингЧасов ЯрЧелябинскШахтерскЮжно-СахалинскЮнокоммунаровскЯндексЯсиноватая