Jak korzystać z Intl API w JavaScript

Intl API upraszcza formatowanie i manipulowanie umiędzynarodowionym tekstem, liczbami, datami i walutami. Pozwala obsługiwać różne formaty danych w zależności od ustawień regionalnych.

Ten interfejs API rozwiązuje problem formatowania danych dla różnych kultur i języków. Ułatwia formatowanie liczb z odpowiednim symbolem waluty lub datą przy użyciu odpowiedniego formatu daty dla określonego regionu.

Korzystając z interfejsu API Intl, możesz tworzyć aplikacje internetowe, które są dostępne i łatwe w użyciu dla odbiorców z różnych regionów i kultur.

Pobieranie ustawień regionalnych użytkownika

The Konstruktory JavaScript dostarczone przez Intl API identyfikują ustawienia regionalne, których użyją do sformatowania daty, tekstu, liczby itp., zgodnie ze znanym wzorcem. Każdy konstruktor bierze widownia i an opcje obiekt jako argumenty. Korzystając z tych argumentów, konstruktor dopasowuje żądane ustawienia regionalne do aktualnie obsługiwanych ustawień regionalnych.

Aby uzyskać ustawienia regionalne użytkownika, możesz użyć nawigator.język nieruchomość. Ta właściwość zwraca ciąg reprezentujący wersję językową przeglądarki.

Wartość nawigator.język właściwość jest znacznikiem językowym BCP 47, który składa się z kodu języka i opcjonalnie kodu regionu oraz innych znaczników podrzędnych. Na przykład „en-US” reprezentuje język angielski używany w Stanach Zjednoczonych.

Możesz także skorzystać z tzw języki nawigatora właściwość, aby uzyskać tablicę preferowanych języków użytkownika, posortowaną według priorytetu. Pierwszy element w tablicy reprezentuje podstawowe preferencje językowe użytkownika.

Po uzyskaniu ustawień regionalnych użytkownika możesz dostosować sposób wyświetlania dat, godzin, liczb i walut w aplikacji za pomocą Międzynarodowy API.

Możesz stworzyć prosty Funkcja JavaScript aby pomóc Ci uzyskać ustawienia regionalne użytkownika. Oto fragment kodu, który może pomóc:

konst getUserLocale = () => {
Jeśli (navigator.languages ​​&& navigator.languages.length) {
powrót nawigator.języki[0];
 }
powrót język nawigatora;
};
konsola.log (getUserLocale());

Ten getUserLocale funkcja zwraca pierwszy element właściwości navigator.languages, jeśli jest dostępny. W przeciwnym razie wraca do właściwości navigator.language, która reprezentuje preferowany język użytkownika w starszych przeglądarkach.

Formatowanie dat dla różnych ustawień regionalnych

Aby sformatować daty za pomocą Międzynarodowy API, możesz użyć Międzynarodowy DateTimeFormat() konstruktor. Ten konstruktor przyjmuje dwa argumenty: ciąg ustawień regionalnych i obiekt opcji.

Obiekt opcji może zawierać właściwości kontrolujące formatowanie daty.

Niektóre z często używanych opcji obejmują:

• dzień powszedni: Ta opcja określa format dnia tygodnia. Możesz ustawić to albo długi (Piątek), krótki (pt.) lub wąski (F).
• rok: Ta opcja określa format roku. Możesz ustawić to albo numeryczne (2023) lub 2-cyfrowy (23).
• miesiąc: Ta opcja określa format miesiąca. Możesz ustawić to albo numeryczne (3), 2-cyfrowy (03), długi (Marsz), krótki (mar) lub wąski (M).
• dzień: Ta opcja określa format dnia. Możesz ustawić to albo numeryczne (2) lub 2-cyfrowy (02).

Oto przykład, który pokazuje, jak sformatować datę za pomocą Międzynarodowy DateTimeFormat() konstruktor:

konst data = Data.Teraz()
konst ustawienia regionalne = getUserLocale();
konst opcje = {
 dzień powszedni: "długi",
 rok: „numeryczny”,
 miesiąc: "długi",
 dzień: „numeryczny”,
};
konst formater = nowyMiędzynarodowy.DateTimeFormat (ustawienia narodowe, opcje);
// dzień tygodnia, miesiąc, data, rok (piątek, 24 marca 2023 r.)
konsola.log (formater.format (data));

Ten kod konfiguruje obiekt formatter, przekazując ustawienia regionalne użytkownika do Międzynarodowy DateTimeFormat()wraz z zestawem opcji. Następnie używa programu formatującego do przekształcenia bieżącej daty w łańcuch. The opcje obiekt zawiera właściwości kontrolujące formatowanie daty.

Formatowanie różnych typów liczb

Możesz użyć Międzynarodowy API do formatowania liczb przy użyciu Międzynarodowy Format liczbowy() konstruktor. Tak jak Międzynarodowy DateTimeFormat(), ten konstruktor przyjmuje jako argumenty ciąg ustawień regionalnych i obiekt opcji.

Obiekt opcji zawiera właściwości sterujące formatowaniem liczby. Te właściwości różnią się w zależności od określonego styl numeru.

Formatowanie ułamków dziesiętnych i procentowych

Możesz formatować liczby jako ułamki dziesiętne i procenty za pomocą Międzynarodowy Format liczbowy() konstruktora, ustawiając właściwość style na dziesiętny dla ułamków dziesiętnych i procent dla procentów.

Oto przykład pokazujący, jak sformatować ułamek dziesiętny:

konst liczba = 123456;
konst ustawienia regionalne = getUserLocale(); // en-US
konst opcje = {
 styl: "dziesiętny",
 minimalna liczba cyfr ułamkowych: 2,
 maksymalna liczba cyfr ułamkowych: 2,
 użyjGrupowanie: PRAWDA,
};
konst formater = nowyMiędzynarodowy.NumberFormat (ustawienia narodowe, opcje);
konsola.log (formater.format (liczba)); // 123,456.00

Powyższy blok kodu formatuje 123 456 jako ułamek dziesiętny z separatorami grupującymi (,) i dwóch miejsc po przecinku.

Oto przykład pokazujący, jak sformatować procent:

konst liczba = 123456;
konst ustawienia regionalne = getUserLocale();
konst opcje = {
 styl: "procent",
 użyjGrupowanie: PRAWDA,
};
konst formater = nowyMiędzynarodowy.NumberFormat (ustawienia narodowe, opcje);
konsola.log (formater.format (liczba)); // 12,345,600%

Powyższy blok kodu wyraża 123 456 jako procent z separatorami grupującymi.

Formatowanie walut

Możesz sformatować liczby jako waluty, ustawiając właściwość style na waluta. Powinieneś ustawić obok niego inne opcje, takie jak:

• waluta: ciąg reprezentujący kod waluty ISO 4217 (na przykład „USD”, „EUR” lub „JPY”) używany do formatowania. Jeśli nie podasz tej opcji, program formatujący wybierze kod waluty na podstawie ustawień regionalnych użytkownika.
• wyświetlanie waluty: Ta właściwość określa, w jaki sposób przeglądarka powinna wyświetlać walutę. Może być albo symbol (75 USD), kod (75 USD) lub nazwa (75 dolarów amerykańskich).

Oto przykład pokazujący, jak można sformatować walutę:

konst liczba = 123456;
konst ustawienia regionalne = getUserLocale(); // en-US
konst opcje = {
 styl: "waluta",
 waluta: „USD”,
 wyświetlanie waluty: "kod",
};
konst formater = nowyMiędzynarodowy.NumberFormat (ustawienia narodowe, opcje);
konsola.log (formater.format (liczba)); // 123 456,00 USD

Powyższy blok kodu formatuje 123 456 jako walutę (USD).

Jednostki formatowania

Możesz użyć Międzynarodowy Format liczbowy() konstruktora do formatowania liczb za pomocą jednostek, takich jak długość, objętość i masa. Możesz to zrobić ustawiając tzw styl Do jednostka. Kiedy ustawiasz styl na jednostkę, musisz określić te opcje:

• jednostka: Ta właściwość określa jednostkę używaną do formatowania, na przykład „metr”, „kilogram”, „litr”, „sekunda” itd.
• wyświetlacz jednostki: Ta właściwość określa, w jaki sposób przeglądarka powinna wyświetlać jednostkę. Możesz ustawić to albo długi (10 litrów), krótki (10 litrów) lub wąski (10l).

Oto przykład pokazujący, jak można formatować jednostki:

konst liczba = 123456;
konst ustawienia regionalne = getUserLocale();
konst opcje = {
 styl: "jednostka",
 jednostka: "litr",
 wyświetlacz jednostki: "długi",
};
konst formater = nowyMiędzynarodowy.NumberFormat (ustawienia narodowe, opcje);
konsola.log (formater.format (liczba)); //123 456 litrów

Powyższy blok kodu formatuje liczbę 123 456 jako jednostkę w litrach.

Alternatywy dla interfejsu API Intl

Intl API zapewnia potężny i elastyczny zestaw narzędzi do formatowania dat, liczb, walut i jednostek w aplikacjach JavaScript. Obsługuje wiele lokalizacji i zapewnia spójny sposób formatowania danych w różnych kulturach i językach.

Możesz chcieć użyć alternatywnej biblioteki, takiej jak Luxon lub Day.js, ze względu na ograniczoną obsługę przeglądarki dla Intl. Ostatecznie wybór między interfejsem API Intl a rozwiązaniem alternatywnym zależy od konkretnych wymagań i ograniczeń projektu.