String (napis)

Tekst jest ciągiem pojedynczych znaków (liter, cyfr, znaków interpunkcyjnych i specjalnych), np.: 'Jan Kowalski'.

Do określania tego typu możemy użyć następującej składni:

var userName = "Jan Kowalski";

lub

var userName = 'Jan Kowalski';

Tutaj nie ma znaczenia czy używasz zapisu apostrofów'(singlequote) czy cudzysłowów"(doublequote) - Należy tutaj pamiętać, aby rozpoczynać i zakańczać deklaracje napisu konsekwentnie tym samym znakiem.

Każdy string rozpoczęty znakiem apostrofu zakończy się znakiem apostrofu. Z cudzysłowem jest tak samo. Wszystko co znajduje się pomiędzy tymi znakami będzie traktowane jako napis.

Ale co się stanie kiedy w naszym tekście zechcemy użyć cudzysłowu lub apostrofu? Przecież te znaki oznaczają początek lub koniec napisu.

Zatem kilka przykładów.

Jeśli chcesz zadeklarować napis, możesz to zrobić za pomocą apostrofu lub cudzysłowia.

Pierwszy to 'eskejpowanie' (od ang. 'uciekać, unikać') znaków specjalnych. Służy do tego backslash, czyli po prostu znak '\'. Jeśli chcemy, aby nasz znak specjalny (kończący napis) był uznany mimo wszystko jako zwykły znak, musimy go poprzedzić backslashem.

var ameba = 'Zielona ameba spotkała się z Neptunem w kawiarni \'Kajko\'.';

var osmiornica = 'Ośmiornica Stefan kupiła 4 pary \'Air Maxów\'.';

W ten sposób 'mówimy' Javascriptowi, aby ten znak po prostu wypisał.

Drugim sposobem jest użycie apostrofu i cudzysłowu naprzemiennie. Jeśli rozpoczniemy napis cudzysłowiem, to dopiero kolejny cudzysłów zakończy naszą deklarację napisu, a apostrofów możemy używać wewnątrz bez dodatkowych konsekwencji. Taką sama zależność możemy wykorzystać, kiedy ciąg znaków rozpoczynamy apostrofem.

Ilustruje to poniższy przykład.

var ameba = "Zielona ameba spotkała się z Neptunem w kawiarni 'Kajko'.";

var osmiornica = "Ośmiornica Stefan kupiła 4 pary 'Air Maxów'.";

Podstawowym zadaniem typustringjest przechowywanie ciągów znakowych, czyli tekstów.

Zastanów się jak można umieścić znak"wewnątrz tekstu zdefiniowanego pomiędzy znakami".

można zmienną zdefiniować następująco:

W tym przypadku do zmiennejtextzostanie przypisana prawidłowa wartość. Dzieje się tak dlatego, że znak'rozpoczyna definiowanie wartości typustringi dopiero kolejny znak'kończy definicję. Znaki"znajdujące się pomiędzy nimi są traktowane tak samo jak zwyczajne litery.

W przeciwieństwie do niektórych języków programowania, w JS nie występuje osobny typ dla pojedynczych liter. Wartość'a'też jest typustring.

Znaki specjalne

Pokazaliśmy już, jak można umieścić znak"wewnątrz zmiennej typustring. Istnieje jednak problem. Jak umieścić wewnątrz jednego stringa zarówno znak"jak i'? Aby go rozwiązać, musimy się zająć zagadnieniem znaków specjalnych.

Znaki specjalne to znaki lub kilka znaków, które mają specjalne znaczenie w tekście.

Najczęściej używanym znakiem specjalnym jest znak nowej linii. Aby go utworzyć, wpisujemy\nwewnątrz ciągu znaków.

Wróćmy do problemu umieszczenia w jednym ciągu znaków'oraz". Istnieje sposób, aby znaki zarezerwowane do tworzenia ciągów znaków traktować jak zwykłe znaki. Służą do tego znaki specjalne\'oraz\". Nasz przykład można zapisać teraz następująco:

Zadanie 1

Stwórz zmiennątext, a następnie wstaw do niej ciąg znaków, który będzie zawierał zarówno'jak i".

Wypisz zawartość zmiennejtextna ekran.

var text = " to jest '' a to \"\" ";

console.log(text);

Metody

Z ciągami znaków są związane ciekawe metody, które możemy na nich wykonywać.

MetodacharAtzwraca literę znajdującą się na danej pozycji. Litery podobnie jak elementy tablic są numerowane od 0;

Ten sam efekt można uzyskać za pomocą operatora indeksacji[].

MetodaindexOfszuka pierwszego wystąpienia ciągu znaków i zwraca jego pozycję. Jeśli ciąg nie został znaleziony zostanie zwrócona wartość-1.

Pojawia się pytanie: co zrobić, jeśli chcemy wyszukać ostatnie wystąpienie danego ciągu znaków?

Służy do tego metodalastIndexOf.

Kolejną ciekawą metodą jestreplace. Służy ona do podmiany fragmentu ciągu znaku innym ciągiem. Pierwszy argument to ciąg znaków, którego szukamy, a drugi to ten, który ma zostać wstawiony w miejsce pierwszego. Metodareplacenie modyfikuje zawartości zmiennej na której została wywołana, zwraca jedynie nową wartość.

W powyższym przykładzie zmiennatextdalej zawiera wartość"To jest przykładowy string".

Metodaslicezwraca fragment ciągu znaków. Przyjmuje dwa argumenty, pierwszy to pozycja znaku, od którego ma się zaczynać nowy string. Drugi argument, to pozycja ostatniego elementu. Zobaczmy to na przykładzie.

Zobaczmy działanie metodysplit, która dzieli string, na tablicę. Metoda ta przyjmuje jako parametr separator, według którego będzie się odbywać dzielenie ciągu znaków na elementy. Zobaczmy jej działanie na przykładzie:

Wynikiem operacjisplitjest tablica. Używając innych języków programowania, zapewne korzystałaś z tablic. Ich obsługa w JS jest standardowa. Elementy są numerowane od 0, a do otrzymania konkretnego elementu tablicy służy operator[].

Wracając do typustring, teraz poznamy metody służące do zmiany wielkości liter w ciągach znaków.toLowerCasezwraca string, które wszystkie litery zostały zmienione na małe litery, natomiasttoUpperCasegeneruje ciąg znaków zawierający tylko wielkie litery.

Zmienne typu string oferują nam również możliwość sprawdzenia ich długości. Służy do tego atrybutlength. Zwróć uwagę na fakt, że nie jest to metoda, więc podczas sprawdzania długości nie używamy operatora()

Po wykonaniu powyższego kodu, do zmiennejlengthzostała wstawiona długość tekstu zawartego w zmiennejtext, czyli w tym przypadku26.

Zadanie 2

Przy użyciu metodyconsole.log(msg), oraz operacji na stringach poznanych w tym rozdziale wypisz na ekran przed ostatnią literę ciągu znaków ze zmiennejtext.

var text = "To jest bardzo długi tekst. Nie warto liczyć ile ma liter. Aby wyświetlić przed ostatnią literę użyj narzędzi, które poznałeś w tym rozdziale. Jeśli zupełnie nie wiesz jak to zrobić możesz użyć wskazówki";

console.log(text[text.length - 2]);

Zadanie 3

Do zmiennejimieNazwiskoprzypisz swoje imię i nazwisko, na przykład:"Jan Kowalski". Następnie , wykorzystując poznane metody wstaw do podanych zmiennych:

Imię, nazwisko, długość zmiennejimieNazwisko, pierwszą i ostatnią literę zmiennejimieNazwisko.

var imieNazwisko = 'Mateusz Wilczyński';

var imie = imieNazwisko.split(' ')[0];

var nazwisko = imieNazwisko.split(' ')[1];

var dlugosc = imieNazwisko.length;

var pierwszaLitera = imieNazwisko.charAt(0);

var ostatniaLitera = imieNazwisko[imieNazwisko.length - 1];

Dodawanie stringów i liczb

Wiemy już, że w JavaScript można dodawać liczby. Można też dodawać do siebie ciągi znaków. Dodanie ciągów znaków powoduje zwrócenie ciągu, który jest ich połączeniem.

Zadanie 4

Do zmiennychimieinazwiskowpisz odpowiednio własne imię i nazwisko.

Następnie wyświetl w terminalu tekst w formacie:"Nazywam się Jan Kowalski".

var imie = 'Mateusz';

var nazwisko = 'Wilczyński';

console.log('Nazywam się ' + imie + ' ' + nazwisko);

Jak już wspomnieliśmy w JS występuje słabe typowanie. Oznacza to, że typ zmiennych może być zmieniony w zależności od potrzeby. Konsekwencją tego jest możliwość dodawania i odejmowanie ciągów znaków z liczbami. Spójrzmy na poniższe przykłady.

Jak widać w pierwszym przypadku otrzymaliśmy wartość9typunumber, stało się tak dlatego, że ciąg znaków'10'został przekonwertowany na typnumber. Natomiast w drugim przypadku została zwrócona wartość"101", typustring. W tym przypadku to liczba1została zamieniona nastring, a następnie zostały dodane dwa ciągi znaków.

Jak widać zasady automatycznej konwersji są niejasne i czasami mogą być mylące dlatego lepiej nie dodawać dwóch różnych typów. Poznaliśmy już metodętoString, która zwraca cyfrę zamienioną na string. Konwertując samodzielnie liczby na stringi mamy pewność, że dodawanie zostanie wykonane jako połączenie ciągów znaków.

Jeśli chcemy aby dodawanie ciągu znaków i liczby było interpretowane jako działanie na liczbach możemy zamienić string na liczbę. Służy do tego funkcjaparseInt. Pobiera ona jako argument ciąg znaków a zwraca liczbę. W przypadku gdy ciąg znaków oprócz cyfr zawiera też litery, na liczbę zostanie przekonwertowana pierwsza możliwa sekwencja.

Spójrzmy teraz na przykład dodawania z użyciemparseInt.

W tym przypadku zostały dodane dwie cyfry, czyli wynik też jest typunumber.

Pobieranie wartości od użytkownika

Dotychczas kod, który pisaliśmy dawał zawsze ten sam rezultat. Wszystkie dane, które były wyświetlane musiały najpierw zostać zapisane w kodzie. Na pewno przyznasz, że nie jest to idealne rozwiązanie. Pisząc bardzo prosty program, który wyświetla imię użytkownika, nie będziesz przecież nikogo prosił, żeby przed wykonaniem programu sam wpisał swoje imię w kodzie, takie podejście nie ma sensu. Na szczęście JavaScript umożliwia pobieranie danych od użytkownika. Jest na to wiele sposobów, jednak my posłużymy się instrukcjąprompt.

Jeśli kod JS jest wykonywany przez przeglądarkę, to od razu mamy dostęp do funkcjiprompt, jej wywołanie polega na wyświetleniu okienka, do którego użytkownik wpisuje wartość. Jednak tak jak już wspominałem zdecydowałem aby w tym kursie używać NodeJS do wykonywania kodu. Takie podejście ma wiele zalet, jest jednak pewien problem. W NodeJS nie jest domyślnie dostępna funkcjaprompt. Istnieje jednak bardzo proste rozwiązanie tego problemu. Wystarczy raz na początku programu dodać poniższą linię.

Na tym etapie nauki nie musisz się zastanawiać co właściwie oznacza ta linia. W skrócie, korzystamy z bibliotekisync-prompt, która udostępnia metodępromptbardzo podobną do tej używanej w przeglądarce internetowej. Pamiętaj, aby zawsze raz na początku pliku dodać tą linię, przed użyciemprompt.

Wywołaniepromptwygląda następująco:

Po wykonaniu tego kodu w zmiennejkolorznajduje się wartość, którą wpisze użytkownik. Pamiętaj, żepromptzawsze zwraca wartość typustingnawet jeśli użytkownik wpisze liczbę.

Zadanie 5

Napisz program, który prosi Cię o podanie imienia i wieku. Gdy wpiszesz imię oraz wiek, program wyświetli komunikat w formacie:

"Cześć Adam, za 8 lat twój wiek będzie wynosił 40."

(Taki komunikat zostanie wyświetlony, gdy wpiszesz imie"Adam"i wiek32)

var prompt = require('sync-prompt').prompt;

var name = prompt('Wpisz imię ');

var age = prompt('Wpisz wiek ');

var newAge = parseInt(age) + 8;

console.log("Cześć " + name + ", za 8 lat twój wiek będzie wynosił " + newAge + ".");