Jak sformatować datę, cenę lub liczbę w Javascript?

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

Materiały źródłowe MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#examples