Как да използвате Intl API в JavaScript

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

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

С помощта на Intl API можете да създавате уеб приложения, които са достъпни и лесни за използване от аудитории в различни региони и култури.

Получаване на локал на потребителя

The JavaScript конструктори предоставени от Intl API, идентифицират локала, който ще използват за форматиране на дата, текст, число и т.н., следвайки познат модел. Всеки конструктор взема a локал и ан настроики обект като аргументи. Използвайки тези аргументи, конструкторът съпоставя искания локал(и) с локалите, които поддържат в момента.

За да получите локала на потребителя, можете да използвате навигатор.език Имот. Това свойство връща низ, представляващ езиковата версия на браузъра.

Стойността на навигатор.език свойство е BCP 47 езиков таг, който се състои от езиков код и, по избор, регионален код и други подтагове. Например „en-US“ представлява английски, както се говори в Съединените щати.

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

След като получите локала на потребителя, можете да персонализирате показването на вашето приложение на дати, часове, числа и валути, като използвате междун API.

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

конст getUserLocale = () => {
ако (navigator.languages ​​&& navigator.languages.length) {
връщане navigator.languages[0];
 }
връщане navigator.language;
};
конзола.log (getUserLocale());

Това getUserLocale функцията връща първия елемент от свойството navigator.languages, ако е налично. В противен случай се връща обратно към свойството navigator.language, което представлява предпочитания от потребителя език в по-старите браузъри.

Форматиране на дати за различни локали

За да форматирате датите с помощта на междун API, можете да използвате междун. DateTimeFormat() конструктор. Този конструктор приема два аргумента: локален низ и обект с опции.

Обектът опции може да съдържа свойства, които контролират форматирането на датата.

Някои от често използваните опции включват:

• делничен ден: Тази опция определя формата на деня от седмицата. Можете да го зададете на едно от двете дълго (петък), къс (пет), или тесни (F).
• година: Тази опция определя формата на годината. Можете да го зададете на едно от двете числови (2023) или 2-цифрен (23).
• месец: Тази опция определя формата на месеца. Можете да го зададете на едно от двете числови (3), 2-цифрен (03), дълго (Март), къс (Мар), или тесни (М).
• ден: Тази опция определя формата на деня. Можете да го зададете на едно от двете числови (2) или 2-цифрен (02).

Ето един пример, който показва как да форматирате дата с помощта на междун. DateTimeFormat() конструктор:

конст дата = Дата.сега()
конст локал = getUserLocale();
конст опции = {
 делничен ден: "дълъг",
 година: "цифров",
 месец: "дълъг",
 ден: "цифров",
};
конст форматиращ = новмеждун.DateTimeFormat (локал, опции);
// делничен ден, месец, дата, година (петък, 24 март 2023 г.)
конзола.log (formatter.format (дата));

Този код настройва обект за форматиране, като предава локала на потребителя към междун. DateTimeFormat(), заедно с набор от опции. След това използва инструмента за форматиране, за да трансформира текущата дата в низ. The настроики обектът съдържа свойства, които контролират форматирането на датата.

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

Можете да използвате междун API за форматиране на числа с помощта на междун. NumberFormat() конструктор. като междун. DateTimeFormat(), този конструктор приема локален низ и обект с опции като аргументи.

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

Форматиране на десетични знаци и проценти

Можете да форматирате числа като десетични знаци и проценти, като използвате междун. NumberFormat() конструктор, като зададете свойството style на десетичен знак за десетични знаци и процента за проценти.

Ето един пример, който показва как да форматирате десетичен знак:

конст брой = 123456;
конст локал = getUserLocale(); // en-US
конст опции = {
 стил: "десетичен",
 minimumFractionDigits: 2,
 maximumFractionDigits: 2,
 useGrouping: вярно,
};
конст форматиращ = новмеждун.NumberFormat (локал, опции);
конзола.log (formatter.format (num)); // 123,456.00

Кодовият блок по-горе форматира 123 456 като десетичен знак с разделители за групиране (,) и два знака след десетичната запетая.

Ето един пример, който показва как да форматирате процент:

конст брой = 123456;
конст локал = getUserLocale();
конст опции = {
 стил: "процент",
 useGrouping: вярно,
};
конст форматиращ = новмеждун.NumberFormat (локал, опции);
конзола.log (formatter.format (num)); // 12,345,600%

Кодовият блок по-горе изразява 123 456 като процент с разделители за групиране.

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

Можете да форматирате числата като валути, като зададете свойството style на валута. Трябва да зададете други опции заедно с него, като например:

• валута: Низ, представляващ кода на валутата ISO 4217 (като „USD“, „EUR“ или „JPY“), който да се използва за форматиране. Ако не предоставите тази опция, форматиращият ще избере код на валута въз основа на локала на потребителя.
• валутен дисплей: Това свойство определя как браузърът трябва да показва валутата. Може или да бъде символ (US$ 75), код (USD 75), или име (75 щатски долара).

Ето пример, показващ как можете да форматирате валута:

конст брой = 123456;
конст локал = getUserLocale(); // en-US
конст опции = {
 стил: "валута",
 валута: "ЩАТСКИ ДОЛАР",
 валутен дисплей: "код",
};
конст форматиращ = новмеждун.NumberFormat (локал, опции);
конзола.log (formatter.format (num)); // 123 456,00 USD

Кодовият блок по-горе форматира 123 456 като валута (USD).

Форматиране на единици

Можете да използвате междун. NumberFormat() конструктор за форматиране на числа с единици, като дължина, обем и маса. Можете да направите това, като настроите стил да се мерна единица. Когато зададете стила на единица, трябва да укажете следните опции:

• мерна единица: Това свойство указва единицата, която да се използва за форматиране, като "метър", "килограм", "литър", "секунда" и т.н.
• unitDisplay: Това свойство определя как браузърът трябва да показва единицата. Можете да го зададете на едно от двете дълго (10 литра), къс (10 л), или тесни (10л).

Ето пример, показващ как можете да форматирате единици:

конст брой = 123456;
конст локал = getUserLocale();
конст опции = {
 стил: "мерна единица",
 мерна единица: "литър",
 единица дисплей: "дълъг",
};
конст форматиращ = новмеждун.NumberFormat (локал, опции);
конзола.log (formatter.format (num)); //123 456 литра

Кодовият блок по-горе форматира числото 123 456 като единица в литри.

Алтернативи на Intl API

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

Може да искате да използвате алтернативна библиотека, като Luxon или Day.js, поради ограничената поддръжка на браузъра за Intl. В крайна сметка изборът между Intl API или алтернатива зависи от специфичните изисквания и ограничения на вашия проект.