Как да започнем с интернационализация в JavaScript

Като адаптираме нашите приложения за различни езици и държави, ние предоставяме по-добро потребителско изживяване. По-лесно е за потребителите да се справят с известни обозначения за дати, валути и числа.

Интернационализацията (i18n) включва добавяне на поддръжка за различни езици и държави във вашето приложение.Числото 18 означава броя на буквите между първото „i“ и последното „n“ .

Примери за интернационализация могат да бъдат поддръжка на Unicode, персонализиране на потребителския интерфейс за различни азбуки или сортиране на масиви на неанглийски низове.

JavaScript изпълнява спецификацията на API за интернационализация и дефинира вградения обект Intl.

И това, което го прави толкова полезен е, че има страхотна съвместимост между браузъри и поддръжка на Node.js:

Да започваме!

В Intlобекта осигурява достъп до няколко конструктора, като:

  • Intl.DateTimeFormat - форматиране на дата и час, чувствително към езика.
  • Intl.NumberFormat - езиково чувствително форматиране на числа.
  • Intl.PluralRules - чувствително форматиране за множествено число и езикови правила за множествено число.
  • Intl.Collator - езиково чувствително сравнение на низове.

Създаването на който и да е от тези обекти следва прост модел:

const formatter = new Intl.ctor(locales, options);

Например локалът „ de-AT“ : немски език, както се използва в Австрия:

const dateFormatterAT = new Intl.DateTimeFormat("de-AT");

След това извикваме метода format () с предоставен обект Date :

const date = new Date("2018-11-25");const format = dateFormatterAT.format(date); // "25.11.2018"

Съдържа само кодове на език и държава. Скоро ще видим по-изчерпателни примери. Тук можете да намерите още примери за локал.

Можем да използваме navigator.language - предпочитаният език за потребителя, който използваме като локал:

Тук вместо директно да извикаме метод за форматиране , можем да го присвоим като функция. Страхотно е, защото след като създадем специализирана функция за форматиране, можем да я използваме няколко пъти.

Само няколко реда код и имате локализирана дата!

След това ще се потопим по-дълбоко и ще научим повече за локалите. Ако не сте готови за това и искате да видите страхотни демонстрации като тази на снимката по-долу - отидете на раздела за примери по-долу!

Гмуркане по-дълбоко

Е, това е достатъчно, за да добиете представа за това как работи, но реалните случаи на употреба могат да станат по-сложни. Ами ако искахме:

  • покажете нашата дата, като използвате японския или персийския календар
  • използвайте тайландски или арабско-индийски цифри както за дати, така и за числа
  • използвайте опростен китайски
  • Някаква комбинация от горното?

Какво е Locale?

За да работим с този API, трябва да научим повече за локалите. Първо, нека дадем определение.

Локалът е идентификатор, който се отнася до набор от потребителски предпочитания като:

  • дати и часове
  • числа и валути
  • преведени имена за часови зони, езици и държави
  • мерни единици
  • подреждане (сортиране)

Локал не е чувствителен към малки и големи букви. Това е само конвенция .

Локалът трябва да е низ, съдържащ езиков маркер BCP 47 и всички части са разделени с тирета.

Нека да разгледаме следващия пример:

Отново само четири реда код? Нека да разгледаме диаграмата по-долу и да разгледаме всяка част от нашия локал:

От тази снимка можете да видите, че е необходима само първата част - езиков код. Едва ли ви е необходим локал като този. Но това е добър пример за разглеждане на всяка възможна част от локала и получаване на представа за това какво е локал.

Нашият локал съдържа всички възможни части:

  • zh (езиков код) - китайски език
  • Hans (скриптов код) - написан с опростени символи
  • CN (код на държавата) - както се използва в Китай.
  • bauddha (вариант) - използване на будистки хибриден санскритски диалект
  • u-nu-hanidec (разширение) - използване на десетични числа на Хан

По-долу можете да намерите още примери за скриптове, варианти и разширения.

Кодове на скриптове

Те се използват с езикови тагове, за да посочат в кой скрипт е написан език. Например:

Вариантни кодове

Вариантите представляват езиков диалект.

Разширения

Включва различни календари и цифрови системи.

Календарите имат префикс „u-ca-“, възможни стойности (не всички включени):

Числовите системи имат префикс „u-nu“, възможни стойности (не всички включени):

Организацията Iana е отговорна за поддържането на този списък актуален.

Преговори на място

Последното нещо, което трябва да научим за локалите, е как те са разрешени. Видяхме този пример и преди:

const formatter = new Intl.ctor(locales, options);

В localesаргумент се посочва единична локал или масив от локали. Средата (браузър или Node.js) я сравнява с локалите, с които разполага, и избира най-добрата.

Има два съвпадащи алгоритма:

  • справка - проверява от по-конкретно към по-малко: ако zh-Hans-SG не е налице, вземете zh-Hans , ако не - zh, в противен случай - локал по подразбиране.
  • най-подходящо (по подразбиране) - Подобрен алгоритъм. Ако е поискано „es-GT“ - испански за Гватемала, но не е намерено, вместо да се предостави резервен вариант като „es“, ще бъде избран „es-MX“ - испански в Мексико.

Ако предоставим масив от локали, тогава първият мач печели.

И така, достатъчно теория - сега е моментът да практикувате!

Примери

Кодът за примерите може да бъде намерен на GitHub.

Форматиране на дата / час

Локалите не са единственото нещо, което е чудесно за Intl API. Можете да промените резултата по желан начин, като използвате optionsаргумент.

Това е масивна актуализация в сравнение с обекта Date !

За разлика от moment.js, не можете ръчно да разменяте никоя част от датата като година и месец. Вместо това трябва да използвате правилния локал. Това може да звучи като ограничение , но го прави по-познато за нашите потребители.

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

Като знаете как да се справите с датите, вие знаете как да се справите с числата. Единствената разлика е списъкът с опции:

Форматиране на валута

За валутите използваме Intl.NumberFormatконструктор, но предоставяме различен списък с опции:

Имайте предвид, че ние не конвертираме пари тук. Всичко, което правим, е да форматираме числото 172630, като използваме подходящи валутни правила. Тук можете да намерите списъка с кодове на валути.

Форматиране на правила за множествено число

Това ви казва кой формуляр се прилага въз основа на даден номер за конкретен локал:

Може да бъде много удобен за форматиране на редови номера:

Сортиране на низове

Сортирането на низове, които съдържат допълнителни букви като ä на немски или шведски, не е това, което искате да направите ръчно, само защото редът зависи от езика. За наш късмет имаме . И отново всичко, което трябва да направим, е да предоставим необходимия локал:Intl.Collator

Заключение

Интернационализацията е страхотна и сложна тема. Но ако знаете какво е локал и как да го изградите, останалото е супер лесно за използване.

Това е!

Ако имате някакви въпроси или отзиви, уведомете ме в коментарите долу или ме изпратете в Twitter.

Ако това е било полезно, моля, щракнете върху пляскането? бутон долу няколко пъти, за да покажете вашата подкрепа! ⬇⬇ ??

Ето още статии, които съм написал:

Как да опростите вашата кодова база с map (), намаляване () и филтриране () в JavaScript

Когато четете за Array.reduce и колко готино е, първият, а понякога и единственият пример, който намирате, е сумата от ... medium.freecodecamp.org Готови за производство Node.js REST API интерфейси с използване на TypeScript, PostgreSQL и Redis.

Преди месец ми беше дадена задача да изградя прост API за търсене. Всичко, което трябваше да направи, е да вземе някои данни от трета страна ... medium.com

Благодаря, че прочетохте ❤️