JavaScript: Tekstowy typ danych

0:00Omówimy teraz jeden z typów danych, jakim

0:02jest tekstowy typ danych, czyli z angielskiego

0:05tak zwany string. Utworzę sobie pierwszą stałą, bo nie

0:09będziemy zmieniać jej wartości, więc nie będę korzystał z let, ale skorzystam z

0:13const i tym razem już będę tworzył po angielsku nazwy tych wszystkich stałych i

0:17zmiennych do końca tego kursu, więc napiszę firstName,

0:21można to zapisać tak,

0:22można oczywiście również tak.

0:24W takiej notacji jest to notacja camelCase

0:27jak widzisz tak ona się nazywa, kiedy

0:29kolejne jakby człony rozpoczynamy od wielkiej litery. I przypisze tutaj wartość Jan.

0:35Coś, co widzieliśmy już w lekcji poprzedniej.

0:37Ale gdzie jest właśnie ten tekstowy typ danych?

0:39Otóż w tym miejscu. Więc między cudzysłowami możemy wpisywać dowolny tekst,

0:45tutaj dowolne znaki się mogą znaleźć, oczywiście również spacje itd.

0:49i jest to tekstowy typ danych.

0:51To jest jeden ze sposobów jak utworzyć zmienną o takim typie.

0:54Teraz utworzymy sobie kolejną stałą,

0:57w tym przypadku również będzie to lastName, czyli nazwisko.

1:00I tym razem skorzystam z takich pojedynczych apostrofów i napiszę tutaj

1:04Kowalski. I teraz mógłbyś zapytać czym różnią się te dwa zapisy?

1:08Bo oba z nich są dozwolone w języku JavaScript.

1:12W praktyce nie różnią się one niczym,

1:15czyli dokładnie tak samo to będzie działać

1:17i jest kwestią Twojej preferencji

1:18tylko czy wolisz zapisywać stringi właśnie

1:21w taki sposób, czy za pomocą pojedynczych apostrofów.

1:24Bardzo często spotyka się

1:26z tym, że programiści używają pojedynczych apostrofów,

1:29ja na przykład osobiście preferuję takie

1:31podwójne w języku JavaScript, a kiedy tworzę w języku PHP,

1:35tworzę je za pomocą pojedynczych, bo tam też można tworzyć na dwa różne sposoby.

1:39Więc jak widzisz, jest to kwestia preferencji.

1:41Wybierz ten sposób, który bardziej Ci odpowiada.

1:45A zatem czy na pewno nie ma żadnych różnic pomiędzy tymi dwoma zapisami?

1:49Teoretycznie nie.

1:50To działa tak samo, ale wyobraźmy sobie sytuację, w której chcielibyśmy utworzyć

1:54taką stałą, gdzie przechowujemy tytuł książki.

1:56Nazwę ją bookTitle i będę chciał tam przechować nazwę Władca Pierścieni.

2:04I teraz chciałbym tutaj również zawrzeć cudzysłowy, bo my je widzimy

2:08ale zobacz, co stanie się, kiedy będę chciał w konsoli wyświetlić bookTitle.

2:13Zobaczmy.

2:14Wyświetli nam się to w taki sposób, czyli dokładnie to, co wpisałem.

2:17Ale co jeżeli chciałbym, żeby ten tekst miał również cudzysłowy?

2:21Powiedzmy, że chcemy ten tekst wydrukować

2:23albo wstawić gdzieś na stronę i normalnie chcę, żeby w nim były cudzysłowy.

2:26Wydawałoby się, że mogę to zapisać w taki

2:28sposób, natomiast nie mogę tego tak zrobić.

2:31Jak widzisz, od razu nam podkreśla, że jest to błąd.

2:34Gdybym zapisał, oczywiście w przeglądarce również zobaczymy błąd i nasz program nie

2:38działa poprawnie. Więc nie można w takich cudzysłowach użyć kolejnych cudzysłowów.

2:43Natomiast jeżeli zapiszemy sobie to w apostrofach,

2:46to wewnątrz nich jak najbardziej możemy już skorzystać z cudzysłowów.

2:50Więc tym to się różni, że po prostu możemy na przemian z tego korzystać.

2:54I teraz w ten sposób za pomocą tego mówimy językowi, że my będziemy tworzyć wartość

2:58tekstową, a wszystko, co wpisaliśmy w środku jest już tą wartością tekstową.

3:03Czyli wtedy ten cudzysłów i ten cudzysłów

3:06nie ma już specjalnego znaczenia, tak jak tutaj.

3:08Jest to po prostu treść tego stringa.

3:11I teraz jak sobie to wyświetlimy, to mamy już tutaj te cudzysłowy.

3:14One są po prostu w wartości tekstowej, którą wpisaliśmy.

3:17No i oczywiście to może zadziałać również w drugą stronę.

3:20Gdybyśmy chcieli skorzystać z apostrofów wewnątrz, to wtedy wszystko oplatamy

3:24cudzysłowami i wtedy to będzie wyglądało następująco.

3:27Bo gdybyśmy tutaj mieli również same apostrofy, tak samo byłby to błąd.

3:33Więc tak możemy to zrobić,

3:34aczkolwiek jest jeszcze inny sposób na to, jak możemy tutaj zawrzeć cudzysłowy.

3:39Ja je jeszcze raz tutaj dodam zobacz,

3:41to tworzy nam błąd, ale możemy je poprzedzić backslashem i

3:45jest to tak zwany znak ucieczki.

3:47Może to dziwnie wygląda, ale kiedy

3:49skorzystamy przed znakiem właśnie z takiego backslasha, to mówimy językowi, że

3:54chcemy od niego uciec, czyli że on nie ma tutaj specjalnego znaczenia.

3:57A więc jeżeli tak rozpoczęliśmy nasz string, to mówimy językowi, że ten kolejny

4:02cudzysłów nie kończy tego stringa, że tutaj w środku nie znajduje się

4:08jakaś wartość, tylko że po prostu chcemy literalnie wstawić tutaj taki oto

4:12cudzysłów i ten drugi również musimy escapeować.

4:15Więc jak tak zapiszemy, zauważ również będziemy mieli tutaj te

4:19wartości poprawnie dodane i te backslashe

4:22one jakby znikają, ale one tylko informują język o tym, że ten kolejny znak to po prostu

4:27jest znak, który chcemy literalnie tam wpisać.

4:29Wtedy możemy to opleść właśnie w taki sposób.

4:33I mamy jeszcze trzeci sposób na tworzenie

4:36stringów, czyli wartości tekstowych w języku JavaScript.

4:38On jest najnowszy, dostępny od ES6 i ma kilka zalet.

4:42Więc spróbujmy sobie napisać coś takiego jak multiline.

4:46Czyli chciałbym stworzyć tekst, który

4:48będzie rozciągnięty na kilka linii. Więc napiszę multiline,

4:53to jest tylko nazwa zmiennej, w tym przypadku stałej,

4:55pamiętaj, gdybym skorzystał z takich

4:57zwykłych cudzysłowów albo apostrofów, to nie mogę sobie tutaj zrobić tego w ten

5:01sposób, że wpiszę linijka pierwsza, wcisnę enter, następnie linijka druga itd.

5:09To od razu nam pokazuje, że generuje błąd.

5:11Musiałbym tutaj skorzystać z takiego specjalnego znaku.

5:14Czyli znowu robiłem backslash i n,

5:17i to jest taki specjalny znak, który mówi

5:19nam, że w tym miejscu wstawiliśmy nową linię.

5:21I teraz jeżeli zrobimy sobie console.log(multiline), zapisze to, to zauważ, że

5:27wyświetli nam się to w dwóch linijkach.

5:30Natomiast możemy skorzystać z takiego specjalnego tzw.

5:34template stringu, który pozwoli nam

5:36normalnie wcisnąć enter tam gdzie chcemy zrobić sobie nową linię,

5:40więc utwórzmy sobie kolejną stałą, którą nazwę multiline 2 i tu ją wyświetlimy,

5:45natomiast usunę ze środka ten zapis

5:49i zamiast cudzysłowów skorzystamy z takich backticków.

5:52Czyli to jest trzeci sposób na tworzenie stringów.

5:55Jeżeli zrobię to w ten sposób, będzie to działać tak samo jak wcześniej, ale przy

5:58tych backtickach można normalnie sobie wcisnąć enter i wszystkie tzw.

6:03białe znaki, które będą wewnątrz będą tutaj brane pod uwagę.

6:06Czyli jak zapiszę coś takiego i w konsoli spróbujemy wyświetlić,

6:10zauważ, że mamy linijka pierwsza,

6:12potem mamy pustą linię i linijka druga,

6:14czyli wszystkie te białe znaki zostały tutaj wzięte pod uwagę.

6:18Zatem jeżeli chcesz utworzyć jakiś string,

6:21który będzie miał wiele linii, bo tutaj go tworzymy i powiedzmy później będziesz

6:24chciał go wstawić na stronę o czym jeszcze będziemy w tym kursie mówić, to możesz

6:28skorzystać właśnie z takiego zapisu, czyli z takiego template stringu.

6:33Na koniec pokażę Ci jeszcze jaka jest zaleta tych template stringów

6:37nad tworzeniem stringów z użyciem cudzysłowów i apostrofów.

6:41Otóż możemy tutaj interpolować wartości różnych zmiennych.

6:44Czyli moglibyśmy tutaj utworzyć string, w

6:46którym napiszemy tytuł książki to i chcielibyśmy tutaj wstawić to co

6:52przechowuje zmienna bookTitle czyli Władca Pierścieni.

6:56I możemy w takim template stringu ale tylko właśnie w takim stringu

7:00skorzystać z dolara, następnie z pary takich nawiasów klamrowych i wprowadzić

7:05tutaj dowolne wyrażenie JavaScript w tym przypadku odwołanie się do zmiennej.

7:09Więc mogę napisać bookTitle

7:12i to utworzy nam string, w którym będziemy mieli tytuł książki to,

7:16a tu zostanie wstawiona wartość Władca Pierścieni i cała taka wartość zostanie

7:22zapisana tutaj w multiline 2, które następnie wyświetlimy w konsoli.

7:26I zobacz. Mamy tytuł książki to Władca Pierścieni.

7:30Zatem podsumowując w języku JavaScript

7:32można tworzyć stringi na trzy sposoby albo za pomocą cudzysłowów, albo apostrofów

7:37i to w zasadzie działa dokładnie tak samo,

7:39z tym, że tak jak tutaj widziałeś jeżeli utworzymy za pomocą apostrofów, to wewnątrz

7:43możemy korzystać z cudzysłowów i na odwrót.

7:46Natomiast trzeci sposób jest to tworzenie tzw.

7:48template stringa, który po pierwsze

7:50honoruje białe znaki, a więc możemy wewnątrz zrobić sobie odstępy itd.

7:54a po drugie pozwala nam np.

7:56interpolować zmienne, czyli wstawiać

7:58tutaj za pomocą dolara i takich nawiasów jakieś wyrażenie JavaScript, które będzie

8:03przetworzone i jego jakby wynik zostanie tutaj podstawiony

8:06literalnie i zapisany w tym przypadku w stałej.