Алексом Пермяков
Адаптируя наши приложения для разных языков и стран, мы предоставляем лучший пользовательский опыт. Для пользователей проще справиться с известными нотациями для дат, валют и цифр.
Интернационализация (I18n) включает в себя добавление поддержки для разных языков и стран в вашем приложении. Номер 18 обозначает количество букв между первым «I» и последним «N» Отказ
Примеры интернационализации могут быть поддержка Unicode, пользовательская настройка интерфейса для различных алфавитов или массив сортировки негасских строк.
JavaScript Inlandements Интернационализация API Спецификация и определяет встроенный Intl объект.
А что делает его таким полезным, так это то, что у него большие кросс-браузерные совместимость и Поддержка Node.js. :
Давайте начнем!
Intl Объект обеспечивает доступ к нескольким конструкторам, как:
- Отрицательный DateTimeFormat – чувствительная к языку дата и время форматирования.
- Отрицательный NumberFormat – чувствительный к языку форматирование номеров.
- Отрицательный Плюральрулы – Множество чувствительных форматирования и правила множественного числа языковых.
- Отрицательный Коллатор – чувствительное к языку строковое сравнение.
Создание любого из этих объектов следует простому шаблону:
const formatter = new Intl.ctor(locales, options);
Например, ” de-at” Локаль: Немецкий язык, как он используется в Австрии:
const dateFormatterAT = new Intl.DateTimeFormat("de-AT");Тогда мы называем Формат () Метод с предоставленным Дата объект:
const date = new Date("2018-11-25");const format = dateFormatterAT.format(date); // "25.11.2018"Он содержит только языковые и страновые коды. Вскоре мы увидим более комплексные примеры. Здесь вы можете найти больше примеров локали.
Мы можем использовать Navigator.Language – предпочтительный язык для пользователя, который мы используем в качестве локали:
Здесь вместо звонка формат Метод напрямую, мы можем назначить его как функцию. Это отлично, потому что, как только мы создали специализированную функцию формата, мы можем использовать его несколько раз.
Всего несколько строк кода, и у вас есть локализованная дата!
Итак, Далее мы собираемся погрузиться глубже и узнать больше о местных. Если вы не готовы к нему и хотите только увидеть классные демонстрации, подобные этой на рисунке ниже – перейдите в раздел «Примеры» ниже!
Дайвинг глубже
Ну, этого достаточно, чтобы получить представление о том, как она работает, но случаи реального использования могут быть более сложными. Что если мы хотели:
- Показать нашу дату с помощью японского или персидского календаря
- Используйте тайские или арабские цифры для даты, так и цифры
- Используйте упрощенный китайский
- Любая комбинация вышеуказанного?
Что такое локаль?
Для того, чтобы работать с этим API, мы должны узнать больше о локах. Прежде всего, давайте дадим определение.
Локаль – это идентификатор, который относится к набору пользовательских предпочтений, таких как:
- Даты и времена
- Числа и валюты
- Переведенные имена за часовые пояса, языки и страны
- Измерение единиц
- Сорт-порядок (сопоставление)
Локаль не чувствителен к регистру. Это только Конвенция Отказ
Локаль должен быть строкой, держащая BCP 47 Языковой Тег и вся часть разделена дефисами.
Давайте посмотрим на следующий пример:
Опять же, только четыре строки кода? Давайте посмотрим на диаграмму ниже и осмотрите каждую часть нашей локали:
С этой картины вы можете увидеть, что требуется только первая часть – код языка – требуется. Вряд ли вам нужен локаль. Но это хороший пример взгляда на все возможные части локали и получить представление о том, что такое локаль.
Наша локаль содержит все возможные части:
- ж (язык языка) – китайский язык
- Ганс (код сценария) – написано в упрощенных символах
- CN (Код страны) – как используется в Китае.
- Боуддха (Вариант) – Использование буддийского гибрида Sanskrit диалект
- U-NU-Hanidec (расширение) – использование десятичных чисел HAN
Ниже вы можете найти больше примеров для скриптов, вариантов и расширений.
Коды сценариев
Они используются с языковыми тегами для указания, какой скрипт языком написан. Например:
Варианты кодов
Варианты представляют языковой диалект.
Расширения
Он включает в себя различные календари и числовые системы.
Календари У «U-Ca-» префикс, возможные значения (не все включены):
Числовые системы У «U-NU» префикс, возможные значения (не все включены):
Организация IANA отвечает за сохранение Этот список своевременно.
Переговоры по локали
Последнее, что мы должны узнать о местных, так это то, как они решаются. Мы видели этот пример раньше:
const formatter = new Intl.ctor(locales, options);
локалий Аргумент определяет одну локаль или массив локалей. Окружающая среда (браузер или Node.js) сравнивает его против локалей, которые он имел доступен и выбрал лучший.
Есть два сопоставленных алгоритма:
- Найти – Проверяет более конкретную до меньшего количества: если zh-hans-sg не доступен, получить ж-Ганс , если нет, – Ж, еще – локаль по умолчанию.
- Лучше всего подходит (дефолт) – Улучшенный алгоритм. Если запрашивается «ES-GT» – испанский для гуатемалы, но не найден, то вместо того, чтобы обеспечить отступление как «ES», будет выбран «ES-MX» – испанский в Мексике.
Если мы предоставим массив локалей, то первый матч выигрывает.
Итак, достаточно теории – сейчас самое время на практике!
Примеры
Код для примеров можно найти на Github Отказ
Дата/время форматирование
Локали не единственное, что здорово о Intl API Отказ Вы можете изменить результат желательным способом, используя Варианты аргумент
Это массивное обновление по сравнению с Дата объект!
В отличие от moment.js Вы не может вручную поменять Любая часть даты, как год и месяц. Вы должны использовать правильную локаль вместо этого. Это может звучать как ограничение , но это делает его более знакомым для наших пользователей.
Номер форматирования
Зная, как иметь дело с датами, вы знаете, как иметь дело с цифрами. Единственное отличие – это список вариантов:
Форматирование валюты
Для валют мы используем Отрицательный NumberFormat Конструктор, но дайте другой список вариантов:
Примечание, мы не конвертируем деньги здесь. Все, что мы делаем, это отформатировать номер 172630, используя уместно Валютные правила. Здесь вы можете найти список Валютные коды Отказ
Форматирование правил множественного числа
Это говорит вам, какая форма применяется на основе данного номера для конкретной локали:
Это может быть очень удобно для форматирования порядковых чисел:
Сортировка строк
Сортировка строк, которые содержат дополнительные буквы, такие как Ä На немецком или шведском языке не то, что вы хотите сделать вручную, только из-за заказа зависит от языка. К счастью для нас, у нас есть Intl Отказ Коллатор Отказ И снова все, что нам нужно сделать, это дать необходимый локаль:
Заключение
Интернационализация – отличная и сложная тема. Но если вы знаете, что такое локаль и как ее построить, остальные являются суперпростыми в использовании.
Вот и все!
Если у вас есть какие-либо вопросы или отзывы, дайте мне знать в комментариях ниже или пинг на Twitter Отказ
Если это было полезно, пожалуйста, нажмите на хлопок? Нажмите ниже несколько раз, чтобы показать вашу поддержку! ⬇⬇ ??
Вот еще статьи, которые я написал:
Как упростить вашу кодовую базу с помощью карты (), уменьшить () и фильтровать () в JavaScript Когда вы читаете о Array.reduce и насколько это круто, первый, а иногда единственный пример, который вы находите, это сумма … Medium.freecodeCamp.org Производство готовых Node.js Остальные APIS Setup с использованием Tymdercript, PostgreSQL и Redis. Месяц назад мне дали задачу построить простой поиск API. Все, что ему нужно было сделать, это схватить некоторые данные из 3-го вечеринки … medium.com
Спасибо за чтение ❤️
Оригинал: “https://www.freecodecamp.org/news/how-to-get-started-with-internationalization-in-javascript-c09a0d2cd834/”