EcmaScript 6: Funkcje tagujące

0:00Razem z nowym zapisem string'ów, czyli template strings, otrzymaliśmy

0:04również coś, co nazywa się funkcją tagującą lub z angielskiego tag

0:08function i pokażę ci teraz na czym ona polega. Jest to coś co być może nie będzie

0:12aż tak często dla ciebie przydatne, ale nie mógłbym tego pominąć w tym

0:16kursie, jeżeli mówimy o template string'ach. Więc na początek zrobiłem sobie coś

0:21takiego i tutaj nie powinno być już dla ciebie nic nowego. Czyli mamy obiekt, z którego wyciągam

0:25sobie pewne właściwości i zapisuje je pod nowymi zmiennymi.

0:29Czyli zmienna to będzie pName i pPrice i będę chciał utworzyć

0:33sobie taki template string, w którym po prostu to wstawię i za pomocą console.log wyświetle,

0:39czyli efekt będzie taki. Dodałeś do koszyka produkt płyta DVD, cena 1.

0:43Natomiast teraz chciałbym, aby to jeden zostało sformatowany na

0:471.00 PLN lub na przykład zł, czyli

0:51złotych. Pokażę ci za moment jak możemy to zrobić, na przykładzie funkcji tagującej.

0:56Jak stworzyć funkcję tagującą, jak ją wywołać. Przejdźmy sobie na samą górę i nazwę

1:02funkcji formatPrice. Tworzymy zwyczajną funkcję

1:06tak jak robiliśmy to zawsze, natomiast wywołujemy ją tutaj nie

1:10przekazując jej cały ten string, ale pisząc coś takiego formatPrice i znowu jest

1:16to nowy zapis w JavaScripcie, wcześniej coś takiego byłoby błędem, nie moglibyśmy tak napisać. Natomiast, jeżeli

1:21chcesz taki string stagować taką funkcją, masz jakąś funkcję

1:25i wstawiasz ją tutaj bezpośrednio przed samym takim stringiem. Jeżeli

1:30byśmy tak zrobili też nie będzie żadnego błędu, można tak zrobić, natomiast

1:35lepiej to wygląda taki sposób. No i teraz przejdziemy

1:39sobie tutaj i musimy uzupełnić parametry,

1:44które się będą w tej funkcji pojawiać, bo bardzo ciekawe jest co tutaj będzie. Natomiast powiem

1:48ci od razu, że to co on zwróci, jeżeli by ona zwracała Hej,

1:52to cały ten string to będzie po prostu Hej. Zauważ, jest to Hej.

1:57Sprawdźmy jeszcze tylko, co by było gdybyśmy tutaj postawili spację i będzie

2:01to działać tak samo, więc ta funkcja coś otrzyma i coś zwraca i to co ona zwróci

2:05to całość zostanie dopiero podstawiona tutaj do zmiennej info. Natomiast

2:09co w niej otrzymamy? Pierwsza rzecz to będzie string i w

2:13zasadzie będzie to tablica, więc mogę nazwać ją strings. No i zobaczymy co tutaj się

2:17znajdzie, console.log strings. Wyświetlmy

2:22i okaże się, że otrzymamy tablice ze wszystkimi string'ami, które

2:26się znajdowały w całym tym ciągu i zauważ, że mamy coś takiego. Dodałeś

2:30do koszyka produkt dwukropek spacja, czyli jest to ten pierwszy cały string

2:34aż do momentu gdzie pojawiła się jakaś wartość, w tak zwanym placeholder'ze. Następnym

2:39stringiem było coś takiego w cenie, zobaczmy. Faktycznie on się tutaj pojawił

2:43i ostatnim była kropka, czyli te string'i znajdą się w tablicy

2:47strings. Natomiast teraz, pojawi się tutaj jeszcze

2:51jeden parametr, ale w nieco inny sposób. Czyli nie ma tak, że te

2:56wartości, które są w tym miejscu pojawią się na przykład tablicy values. Okazuje się, że

3:00nie. Zobaczmy, co by tam było. Pod value mielibyśmy

3:06płyta DVD, czyli tak naprawdę tylko to, co zostało tutaj jakby

3:10podstawione, czyli ta wartość. To co zostało tutaj zinterpolowane. Jak

3:14zatem dobrać się do wartości price, która jest w tym miejscu. Musiałbym ją tutaj utworzyć jako

3:18kolejny parametr i zrobić kolejny console.log price. Jak

3:22widzisz, teraz jest wszystko okej, natomiast przecież nigdy nie wiemy z góry, ile tutaj będzie takich placeholder'ów,

3:27więc być może już się domyślasz, że tutaj świetnym rozwiązaniem będzie skorzystanie z

3:32operatora rest, czyli w pierwszym będziemy zawsze mieli tablice ze string'ami,

3:36a w drugim i w kolejnym będzie mieli poszczególne wartości, które tutaj z

3:40tych wyrażeń zostały wyliczone, więc chcielibyśmy sobie je zwrócić

3:44w formie tablicy values. Zobaczmy jak to teraz będzie wyglądać. No i

3:48będziemy mieli string'i w jednej tablicy, a wartości podstawione w drugiej. Ważne

3:52jest to, że ta druga tablica zawsze będzie o jeden element krótsza niż ta u góry.

3:57Zawsze tak będzie, nawet gdybym tutaj na końcu nie dał tej kropki, zobaczmy.

4:01Tak powinno być. Jak widzisz na końcu otrzymuje w tym momencie pusty ciąg

4:05i podobnie mogłoby być na początku gdybym coś interpolował tutaj od samego początku.

4:10Zerknijmy, też bym otrzymał pusty ciąg, czyli taka jest zasada, że tutaj zawsze

4:14jest jeden element więcej. Okej, zostawmy sobie to w takiej formie. No

4:18i teraz skoro te wartości tutaj mamy, to coś z nimi możemy zrobić. Gdybyśmy

4:23chcieli odwzorować działanie takiego sting'u, czyli wszystko tutaj połączyć tak jakby nie było tej

4:27funkcji, to moglibyśmy to zrobić w następujący sposób. Musimy sobie wykonać

4:31jakąś pętlę i wykonamy ją na tej tablicy strings forEach, na

4:36przykład. To jest jeden sposób na zrobienie pętli. Zróbmy sobie tutaj taką

4:41oto funkcję, która otrzyma jeden pojedynczy string, czyli na przykład to dodałeś do koszyka,

4:45a pod drugim parametrem indks takiej iteracji, czyli na przykład 0, 1, 2, 3. Wcześniej

4:51natomiast utworzylibyśmy sobie za pomocą na przykład let zmienną output, która

4:57byłaby takim pustym ciągiem znaków. No i tutaj byśmy do output chcieli sobie

5:01dodać, czyli plus równa się string i dodatkowo

5:05do tego dodalibyśmy sobie jeszcze wartość, która znajduje się tutaj w values, czyli

5:09mieliśmy na przykład w tym miejscu płyta DVD, więc odwołałbym się do values. Wiemy, że za pomocą

5:13operatora rest, jest to tablica i podałbym po prostu ten indeks. Zobaczmy

5:18czy ma to sens i na końcu byśmy zwrócili oczywiście output. Okazuje

5:25się, że tak. Z tym, że na samym końcu pojawi nam się jeszcze undefined, bo wykonuje iterację

5:29na strings, a strings, powiedziałem ci, że ma zawsze o jeden element więcej niż

5:34jest w tablicy values. Dlatego tutaj mógłbym zrobić sobie taki warunek if

5:39values pod index nie jest równa undefined, to

5:43wtedy chcę to po prostu dodać, czyli output plus,

5:47równa się values, index. Mam nadzieję, że też ma to dla ciebie sens i

5:51teraz odwzorowaliśmy sobie tak naprawdę domyślne działanie, gdybyśmy

5:56nie skorzystali zupełnie z funkcji formatPrice. Zobacz. Dokładnie

6:00tak samo to wygląda. Natomiast po co z tej funkcji tagującej skorzystaliśmy? Bo chcę ci

6:04teraz pokazać, że możemy tą cenę, która jest tutaj zamienić sobie na

6:08troszkę inne formatowanie za pomocą takiej funkcji. Gdybyśmy raz

6:13jeszcze zerknę i sobie pod console.log do values, to zobaczyłbyś, że wartość która tutaj

6:17będzie pod tym pPrice, czyli po drugim indeksem. Jest to wartość numeryczna, czyli

6:21po prostu number. Dlatego w tym miejscu, gdzie jesteśmy tutaj. Mógłbym sobie zrobić

6:25jeszcze jedno sprawdzenie. Jeżeli typeof

6:29values index, a skoro tyle razy się do tego

6:33odwołujemy to może utworzymy sobie taką zmienną. Napiszmy let value

6:38równa się values index, czyli będę

6:42tutaj miał wartość albo płyta DVD albo 1, w tym przypadku, więc

6:46tutaj się odwołajmy po prostu do value. Podobnie

6:51zrobimy w tym miejscu, value i tutaj. Jeżeli typeof

6:56value to się równa number, to

7:00coś zrobimy, a w przeciwnym wypadku dodamy tak jak przed momentem. Więc

7:07jeżeli to jest number to chciałbym go w jakiś fajny sposób sformatować, czyli tą cenę jakoś

7:11sformatować, więc value napiszemy toFixed 2,

7:15to zawsze wykonane na jakiejś liczbie zwróci

7:21nam string, który będzie w ten sposób sformatowany i chciałbym do tego dodać sobie jeszcze PLN, w

7:27ten sposób i to dodamy do output. Zobaczmy

7:33jak to teraz będzie wyglądać i zobacz, dodałeś do koszyka produkt płyta DVD w cenie

7:371 zł, więc tak moglibyśmy to zrobić. Oczywiście gdyby w tym stringu

7:41pojawiły się jeszcze jakieś inne wartości numeryczne, to one również tutaj ten warunek by

7:45spełniły i też zostały by tak sformatowane, więc tutaj, to już zależy od

7:49konkretnego przypadku. Natomiast chciałbym ci pokazać wykorzystanie funkcji tag'ującej. Ona

7:53otrzymuje wszystkie string'i, które są tutaj oraz wszystkie wartości, które

7:57możemy zebrać operatorem rest do tablicy values. No i później musimy zwrócić

8:02jakiś nowy string, który zostanie podstawiony pod taką całość. Już

8:07w internecie gdyby sobie wyszukał, deweloperzy stworzyli bardzo wiele różnych funkcji tag'ujących,

8:11które na przykład zajmują się można powiedzieć internacjonalizacją,

8:15czyli tłumaczeniem jakiś różnych wartości na potrzeby wielojęzykowych

8:20stron i tak dalej, więc zastosowanie może być naprawdę szerokie. Jeżeli

8:24tobie się to nie przyda, to przynajmniej będziesz wiedział, że coś takiego istnieje, bo tak

8:28jak wspominałem na początku, nie chciałbym tak istotnej rzeczy w tym przypadku pomijać. Jak

8:33zatem widzisz, dokładnie w taki sposób można pracować z tak zwanymi template strings. Natomiast w

8:37kolejnej lekcji pokażę ci jeszcze jakie nowe metody w ogóle do stringów

8:41zostały dodane w EcmaScript 6.