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

Intl API упрощает форматирование и обработку интернационализированного текста, чисел, дат и валют. Он позволяет обрабатывать различные форматы данных в зависимости от локали.

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

Используя Intl API, вы можете создавать веб-приложения, доступные и простые в использовании для пользователей из разных регионов и культур.

Получение локали пользователя

Конструкторы JavaScript предоставленный Intl API, определяют языковой стандарт, который они будут использовать для форматирования даты, текста, числа и т. д., следуя знакомому шаблону. Каждый конструктор занимает место действия и параметры объект в качестве аргументов. Используя эти аргументы, конструктор сопоставляет запрошенную локаль (языки) с локалями, которые они в настоящее время поддерживают.

instagram viewer

Чтобы получить локаль пользователя, вы можете использовать navigator.language свойство. Это свойство возвращает строку, представляющую языковую версию браузера.

Значение navigator.language Свойство представляет собой языковой тег BCP 47, который состоит из кода языка и, необязательно, кода региона и других вложенных тегов. Например, «en-US» представляет английский язык, на котором говорят в Соединенных Штатах.

Вы также можете использовать navigator.languages чтобы получить массив предпочитаемых пользователем языков, отсортированных по приоритету. Первый элемент массива представляет предпочтительный язык пользователя.

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

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

константа получитьUserLocale = () => {
если (navigator.languages ​​&& navigator.languages.length) {
возвращаться навигатор.языки[0];
 }
возвращаться навигатор.язык;
};
консоль.log(getUserLocale());

Этот getUserLocale Функция возвращает первый элемент свойства navigator.languages, если он доступен. В противном случае он возвращается к свойству navigator.language, которое представляет предпочтительный язык пользователя в старых браузерах.

Форматирование дат для разных локалей

Для форматирования даты с помощью Международный API, вы можете использовать Международный ДатаВремяФормат() конструктор. Этот конструктор принимает два аргумента: строку локали и объект параметров.

Объект параметров может содержать свойства, управляющие форматированием даты.

Некоторые из часто используемых опций включают в себя:

  • будний день: Этот параметр определяет формат дня недели. Вы можете установить его либо длинный (Пятница), короткий (пт) или узкий (Ф).
  • год: Этот параметр определяет формат года. Вы можете установить его либо числовой (2023) или 2-значный (23).
  • месяц: Этот параметр определяет формат месяца. Вы можете установить его либо числовой (3), 2-значный (03), длинный (Маршировать), короткий (март) или узкий (М).
  • день: Этот параметр определяет формат дня. Вы можете установить его либо числовой (2) или 2-значный (02).

Вот пример, который показывает, как отформатировать дату с помощью Международный ДатаВремяФормат() конструктор:

константа дата = Дата.сейчас()
константа локаль = getUserLocale();
константа варианты = {
 будний день: "длинный",
 год: "числовой",
 месяц: "длинный",
 день: "числовой",
};


константа форматер = новыйМеждународный.DateTimeFormat (локаль, параметры);
// день недели, число месяца, год (пятница, 24 марта 2023 г.)
консоль.log(formatter.format (дата));

Этот код устанавливает объект форматирования, передавая локаль пользователя в Международный ДатаВремяФормат()вместе с набором опций. Затем он использует средство форматирования для преобразования текущей даты в строку. параметры Объект содержит свойства, управляющие форматированием даты.

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

Вы можете использовать Международный API для форматирования чисел с помощью Международный Числовой Формат() конструктор. Нравиться Международный ДатаВремяФормат(), этот конструктор принимает в качестве аргументов строку локали и объект параметров.

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

Форматирование десятичных знаков и процентов

Вы можете форматировать числа как десятичные дроби и проценты, используя Международный Числовой Формат() конструктор, установив для свойства стиля значение десятичная дробь для десятичных дробей и процент для процентов.

Вот пример, который показывает, как форматировать десятичную дробь:

константа число = 123456;
константа локаль = getUserLocale(); // en-US
константа варианты = {
 стиль: "десятичная дробь",
 минимальная дробная цифра: 2,
 максимальная дробная цифра: 2,
 использованиеГруппировка: истинный,
};


константа форматер = новыйМеждународный.NumberFormat (локаль, параметры);
консоль.log(formatter.format (число)); // 123,456.00

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

Вот пример, который показывает, как форматировать процент:

константа число = 123456;
константа локаль = getUserLocale();
константа варианты = {
 стиль: "процент",
 использованиеГруппировка: истинный,
};


константа форматер = новыйМеждународный.NumberFormat (локаль, параметры);
консоль.log(formatter.format (число)); // 12,345,600%

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

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

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

  • валюта: строка, представляющая код валюты ISO 4217 (например, «USD», «EUR» или «JPY»), используемая для форматирования. Если вы не укажете эту опцию, средство форматирования выберет код валюты на основе языкового стандарта пользователя.
  • валютаДисплей: это свойство указывает, как браузер должен отображать валюту. Это может быть либо символ (75 долларов США), код (75 долларов США) или имя (75 долларов США).

Вот пример, показывающий, как вы можете форматировать валюту:

константа число = 123456;
константа локаль = getUserLocale(); // en-US
константа варианты = {
 стиль: "валюта",
 валюта: "ДОЛЛАР США",
 валютаОтображение: "код",
};


константа форматер = новыйМеждународный.NumberFormat (локаль, параметры);
консоль.log(formatter.format (число)); // 123 456,00 долларов США

Блок кода выше форматирует 123 456 как валюту (доллары США).

Единицы форматирования

Вы можете использовать Международный Числовой Формат() конструктор для форматирования чисел с единицами измерения, такими как длина, объем и масса. Вы можете сделать это, установив стиль к единица. Когда вы устанавливаете стиль на единицу измерения, вы должны указать следующие параметры:

  • единица: это свойство указывает единицу измерения, используемую для форматирования, например «метр», «килограмм», «литр», «секунда» и т. д.
  • единица измерения: это свойство указывает, как браузер должен отображать единицу измерения. Вы можете установить его либо длинный (10 литров), короткий (10 л) или узкий (10л).

Вот пример, показывающий, как вы можете форматировать единицы измерения:

константа число = 123456;
константа локаль = getUserLocale();
константа варианты = {
 стиль: "единица",
 единица: "литр",
 единица измерения: "длинный",
};


константа форматер = новыйМеждународный.NumberFormat (локаль, параметры);
консоль.log(formatter.format (число)); //123 456 литров

Приведенный выше кодовый блок форматирует число 123 456 как единицу измерения в литрах.

Альтернативы международному API

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

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