Yo!
Dziś mam dla Was bardzo ciekawy sposób na formatowanie większości danych (data, waluty, czas do danego momentu itd) bez konieczności zaciągania zewnętrznych paczek i polegania na rozwiązaniach innych. Pewnie większość osób (z mojej obserwacji), gdy musi przeformatować jakieś daty instaluje daną paczkę (na Ciebie patrzę dayjs 👀), ale to w większości wypadków nie jest koniecznie, a tylko zwiększa końcowy rozmiar naszej aplikacji!
W tym wpisie opiszę działanie wbudowanego obiektu w JS “Intl”, który pozwala na sformatowanie naszych danych do określonego formatu w większości codziennych przypadków. 😉
To obiekt rozszerzający Internationalization API z ECMAScript, które zapewnia porównywanie stringów z uwzględnieniem wielkości liter, formatowanie liczb, dat oraz czasu i wiele więcej (definicja z MDN)
Jego deklaracja wygląda mniej więcej tak:const formatter = new Intl.<nazwa_metody>(<locale (np 'pl-PL')>, <opcjonalny obiekt z opcjami>)
Nie rozwodząc się zbyt długo, przejdę do pokazania działania na przykładach:
Formatowanie liczb
Jak widać na przykładach inicjalizujemy instancję naszego formattera podając localeString oraz opcjonalnie obiekt z konfiguracją, w której możemy przekazać co chcemy formatować oraz w jaki sposób.
Jak widać na screenie poniżej przekazując style='currency'
mówimy naszemu formaterowi, żeby zwracał wartości dostosowanie do formatu walut w danym kraju (przekazanym localeStringu). Jak wiadomo w USA z reguły używa się kropek zamiast przecinków (jak choćby w Polsce), a ‘dolar’ występuje przed liczbą. Na szczęście nie musimy martwić się o te kwestie, bo Intl zajmuje się tym za nas! 😉
Instancją “NumberFormat” formatujemy wszystko co związane z liczbami, a więc waluty, ale również numery telefonów, procenty i podobne.
Najwięcej wyjaśnią przykłady poniżej:
Formatowanie walut
W większości pokazane już w sekcji wyżej przy formatowaniu liczb, natomiast tutaj kilka przykładów uzupełniających:
Formatowanie dat
Tworząc instancję Intl z DateTimeFormat bez problemu sformatujemy również datę tak, aby spełniała nasze oczekiwania, potrzebujesz nazwy miesiąca w danym języku? Myk i masz nazwę miesiąca pisaną słownie w obecnym języku strony.
Formatowanie czasu relatywnie do daty
Z instancją RelativeTimeFormat możemy wyświetlać, że coś się wydarzyło “X czasu temu” lub “za X czasu” w odniesieniu od obecnego momentu. Niesamowicie użyteczne na przykład w czatach, gdzie wiemy, że ktoś był dostępny “X minut temu” (znane choćby z Messengera 😉 ).
Użycie jest niesamowicie proste jak widać poniżej, do naszej instancji RelativeTimeFormat podajemy liczbowo wartość “czasu”, a następnie jednostkę, w której chcemy to liczyć (na przykład godziny, minuty).
Formatowanie elementów w listach
Możemy formatować nasze tablice z danymi na tekst, który “wylicza” te elementy. Zamiast używać join na tablicy i dodawać łącznik (na przykład “czy”) możemy po prostu użyć Intl!
Dzięki temu z tablicy
["Samsung", "Apple", "Nokia"]
otrzymamy
Samsung, Apple i Nokia
( w przypadku opcji conjuction).
Collator
Super ciekawy przypadek pozwalający nam na porównywanie elementów uwzględniając ich rozmiar liter i specyficzne dla danego języka znaki (np ą, ę, ó dla Polskiego) zależnie od konfiguracji.
Jak widzimy poniżej collatorPL podczas sortowania porównuje polskie znaki przy sortowaniu, dlatego “ą” jest dalej niż “a”. Natomiast collatorUS nie rozróżnia tych znaków i traktuje “ą” jak “a” itd (z racji, że w angielskim alfabecie one nie występują) i tak też je sortuje. Najwięcej pokaże screen poniżej!
Podsumowanie
To tyle na dzisiaj! Znałeś ten obiekt, używałeś/ używasz go na codzień?
~ Bartek
Moja strona: https://bstefaniak.pl
Linkedin: https://www.linkedin.com/in/bartosz-stefaniak-a82727222/
Materiały źródłowe
MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#examples