DEV Community: Bartosz Stefaniak

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

Bartosz Stefaniak — Mon, 05 Aug 2024 10:26:04 +0000

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

How to format date, currency or time period?

Bartosz Stefaniak — Mon, 05 Aug 2024 10:16:33 +0000

Yo!

Today I have a very interesting way for you to format most of your data (date, currencies, time to a particular moment, etc) without having to download external packages and rely on the solutions of others. Probably most people (from my observation), when they need to reformat some dates install a given package (I'm looking at you dayjs 👀), but this in most cases is not necessary, and only increases the final size of our application!

In this post, I'll describe the workings of the built-in object in JS "Intl ", which allows us to format our data to a specific format in most everyday 😉

It's an object that extends the Internationalization API from ECMAScript, which provides case-sensitive string comparison, number, date and time formatting and more (definition from MDN)

Its declaration looks roughly like this:
const formatter = new Intl.<name_method>(<locale (e.g. 'en-PL')>, <optional object with options>)

Without dwelling too long, I will proceed to show the operation with examples:

Formatting numbers

As you can see in the examples, we initialize an instance of our formatter by passing localeString and an optional configuration object, where we can pass what we want to format and how.

As you can see in the screenshot below by passing
style=`currency we tell our formatter to return values to match the currency format in the given country (the passed localeString). As you know, the US generally uses periods instead of commas (as in Poland, for example), and 'dollar' comes before a number. Fortunately, we don't have to worry about these issues, because Intl takes care of it for us! ;)

With the "NumberFormat" instance we format everything related to numbers, so currencies, but also phone numbers, percentages and the like.

The examples below will explain the most:

Formatting currencies

Mostly already shown in the section above on formatting numbers, while here are some complementary examples:

Formatting dates

By creating an Intl instance with DateTimeFormat we can also easily format the date to meet our needs, need the name of the month in a particular language? Myk and you have the month name written in words in the current site language.

Formatting the time relatively to the date

With the RelativeTimeFormat instance, we can display that something happened "X time ago" or "in X time" relative to the current moment. Incredibly useful in chat rooms, for example, where we know that someone was available "X minutes ago" (known even from Messenger ;) ).

The usage is incredibly simple as you can see below, to our RelativeTimeFormat instance we give a numeric value of "time" and then the unit in which we want to count it (for example, hours, minutes).

Formatting elements in lists

We can format our arrays of data into text that "enumerates" those elements. Instead of using join on the array and adding a hyphen (for example, "if") we can simply use Intl!
This way from the array ["Samsung", "Apple", "Nokia"] we will get

Samsung, Apple and Nokia

( in case of conjuction option).

Collator

A super interesting case that allows us to compare elements taking into account their letter size and language-specific characters (e.g. ą, ę, ó for Polish) depending on the configuration.

As we can see below collatorPL compares Polish characters when sorting, so "ą" is further away than "a". On the other hand, collatorUS does not distinguish between these characters and treats "ą" as "a" etc. (due to the fact that they do not occur in the English alphabet) and sorts them that way. The screen below will show the most!

Summary

That's it for today! Did you know this object, use/use it on a daily basis?

~ Bartek

My website: https://bstefaniak.pl (currently only polish)
Linkedin: https://www.linkedin.com/in/bartosz-stefaniak-a82727222/

Source material.
MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#examples

Whats new in Typescript 5.5?

Bartosz Stefaniak — Thu, 25 Jul 2024 09:10:06 +0000

Check also my website! (Currently only in Polish): https://bstefaniak.pl/blog/co-nowego-w-typescript-5-5

Howdy!
Not so long ago the new Typescript officially came out, specifically version 5.5, which brought some really cool fiches, which are presented in this post. Most of them happen underneath, without our interference, but I think they are worth knowing about ;)
Enjoy reading!

1. Better type inference

As you can see below, we create our trailerParkBoys object array, to which we assign some data.
Next up is the getTrailerParkBoy function, which takes an array of strings names. Then we do an operation on the names array; we map and filter all the elements that are "undefined ‘, so there shouldn't be any ’undefined ” element in our boys array anymore right?

Inference in TS below 5.5

Well, that's exactly in TS under 5.5 (the version in the screenshot is 5.4.5) that's not true 😕.
You can see this in the following lines, where we try to call the "action ” method on every element in the boys array, because for TS, the boy element may still be undefined (even though we filtered out all undefined elements beforehand!).

Improving type inference in TS 5.5.

But here's where Typescript 5.5 goes all in white. 😎
Now Typescript no longer screams about a possibly undefined element, now the type is correctly deduced and we can execute the boy.action() method without any problems.

Why is this so?

Typescript 5.5 now automatically creates a “guard check” for itself in methods such as .filter, i.e. a check to make sure that the element we have in mind is of the correct type, and not (in this case) undefined.

As in the screenshot below, depending on the value of true or false of the condition occurring, our element is the expected type (in the case of true) or something else, in the case of false; in our example it's “undefined”.

The value true or false results from the result of the check that takes place underneath (and looks like the commented out isTrailerParkBoy function in the screenshot below)



const isSpecifiedType(value: WantedType | undefined): value is WantedType => .... 
(... is ...Type expects boolean)

NOTE only works when we directly give “undefined” as a possible type

Conditions when it works!

the function does not have an explicit type return or direct type assignment.
The function contains only one return statement and no implicit returns.
The function does not modify its parameter.
the function returns an expression of type boolean, which is related to the refinement of the parameter type.

An example where this does not work:



function getClassroomAverage(students: string[], allScores: Map<string, number>) {
  const studentScores = students
    .map(student => allScores.get(student))
    .filter(score => !!score);

  return studentScores.reduce((a, b) => a + b) / studentScores.length;
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  // error: object is possibly 'undefined'.
}

Because the !!score condition in the .filter method can be false in the case of null, undefined (and indeed undesirable values), but so will be false when score = 0

2. Type Narrowing

Many times it has happened to you that all signs on heaven and earth indicated that some object NEWLY has a given key, but in fact the editor was spilling errors left and right screaming that MAAN, THERE IS NO SUCH KEY?
To me, quite often, that amounted to fiddling with the code, adding guards or projecting types to make TS realize how wrong he was.
Fortunately, that's just history now 😎

TS older than 5.5 did not properly narrow the type when getting to the value in the object

As you can see below in Typescript older than 5.5, despite trying to get into the value of a obj record after checking that the value exists and is a string Typescript still threw the error Object is of type 'unknown'.

Until now, we had to deal with this problem in a different way, for example, by casting the value manually ```as

TYPE''

TS 5.5 correctly deduces the type

As you can see below in Typescript 5.5 this has been corrected, so that after checking the value {% raw %}obj[key] we know that it exists and is of type string therefore we are able to get to it without any problem using obj[key] and call the string method toUpperCase().

3. Type checking in REGEXP

Now RegExps are validated! This is great news, because now every redundant or dropped parenthesis will throw us an error. (aaa, for the rest, no one writes regexps by hand anyway 👀)

4. JSDoc type imports

I suspect that JSDoc is somehow not incredibly often used due to the fact that Typescript itself “documents” the code we write. Nevertheless, I subjectively like this type of “summary” of what a function, method, class does and what it is responsible for.

To shore up; until now we were limited to primitive types, type rewriting, or trying to import it from some modules.

Before TypeScript 5.5, when you tried to import types from external files in JSDoc in JavaScript files, you often got runtime (execution time) errors. This was because TypeScript treated these imports as if they were actual module imports, leading to problems when in fact only types were imported, not entire implementations.
In addition, Typescript, due to its limited static type parsing capabilities, could not accurately recognize types from external files.

In TS 5.5, we can use the @import keyword to import our type as we normally do.

5. configDir variable in tsconfigs

An improvement mostly useful in monorepo projects, but worth knowing about. We can have a base tsconfig file that we share in several different places. Well, that's all cool, but what if you need to recompile TS to a particular folder, for example? Then a little problem begins, because even though our “outDir” will spit out the resulting files to the /dist folder (conventionally named dist), but where our base file is located, not the one that extends it.

With the help of the new variable configDir, which makes this path to be with respect to the file it extends, not the base file.
That is, in the case in the screenshot, it will compile our TS files to the /front-dir/dist folder (rather than /dist).

We use this in the same way as the variables in the template string: `“${configDir}/folder_name”; just like in the screengrab below. ;)

Summary

These are, in my opinion, the most important items that will make your work much more enjoyable.
I encourage you to bite into the other tidbits in this issue of TS 🤓.

Until the next one!
~ Bartek

Check also my website! (Currently only in Polish): https://bstefaniak.pl/blog/co-nowego-w-typescript-5-5

Source material:.

https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/#easier-api-consumption-from-ecmascript-modules

Linkedin: https://www.linkedin.com/in/bartosz-stefaniak-a82727222/