W poprzednim wpisie omówiłem pokrótce typy danych w JavaScripcie i napomknąłem o językach typowanych statycznie i dynamicznie. Najwyższy czas zatem przyjrzeć się dokładniej poszczególnym rodzajom danych. Pierwszy na tapet wjeżdża string.

Gacie na wacie, czyli stringi w kodzie

Literał, ciąg znaków, string - nie ważne, jak to nazwiemy, ważne czym jest.

Na MDN możemy znaleźć, że The String object is used to represent and manipulate a sequence of characters (Obiekt String służy do reprezentowania ciągu znaków i manipulowania nim). Innymi słowy możemy pod zmienną typu string umieścić dowolny ciąg znaków, zarówno pojedynczy symbol, jak i całego Pana Tadeusza.

Celowo napisałem o pojedynczym symbolu, bo string przyjmuje nie tylko litery, ale dowolne znaki: małe i wielkie litery, cyfry, znaki specjalne.

   const stringWithLetters = 'Ala ma kota';
   const stringWithNumber = 'Ala ma 2 koty';
   const stringWithNumberAndSpecial = 'Czy Ala ma 2 koty?!';

Skąd interpreter wie?

Najważniejsze pytanie, to w jaki sposób zadeklarować wartość typu string, żeby interpreter ją poprawnie odczyta.

Są na to trzy sposoby. String można zadeklarować używając cudzysłowów, apostrofów lub tzw. backticków (`).

const singleQuoteString = 'Ala ma kota.';
const doubleQuoteString = "Ala ma kota.";
const backtickString = `Ala ma kota.`;

Warto pamiętać, że ogólnie przyjętą praktyką jest wybór pomiędzy cudzysłowem a apostrofem i trzymanie się tej notacji w całym projekcie. Użycie backticków - choć w przypadku powyższego przykładu da identyczny efekt, jak cudzysłowy i apostrofy - wymaga nieco dokładniejszego omówienia, do czego przejdę za chwilę.

Stringi w praktyce

Ze zmiennymi typu string zetkniecie się praktycznie na każdym kroku, nie ważne w jakim języku będziecie programować. Wszelkie linki, adresy, imiona - to wszystko jest przechowywane jako string. Cały wpis, który właśnie czytacie, jego tytuł czy nazwa kategorii też są zapisany jako string.

Ale czy ze stringiem można zrobić coś więcej, niż tylko go wyświetlić? Oczywiście! Poniżej znajdziecie najczęściej używane operacje na stringach (tak, wiem, jak to brzmi 😂).

Konkatenacja, czyli łączenie stringów

Jedną z podstawowych (i najprostszych) operacji, jakie możemy przeprowadzić na ciągach znaków, jest ich łączenie. W klasycznej formie stringi łączymy znakiem +:

const name = 'Jan';
const lastName = 'Kowalski'

const fullName = name + ' ' + lastName;
//'Jan Kowalski'

Jak zapewne zauważyliście, pomiędzy łączonymi stringami dodałem jeszcze jeden, zawierający tylko spację (i nie - nie jest to to samo, co pusty ciąg!). Bez tego otrzymalibyśmy wynik JanKowalski.

const fullName = name + lastName;
//'JanKowalski'

const emptyString = '';

W powyższym przykładzie zamieściłem też dla dociekliwych przykład pustego ciągu. Warto zauważyć różnicę między ciągiem ze spacją (' ') a pustym stringiem ('').

Czy stringi można łączyć inaczej? Tak - i do tego możemy wykorzystać wspomniane już backticki:

const fullName = `${name} ${lastName}`
//'Jan Kowalski'

Stringi można także łączyć z danymi innych typów. Najczęściej jest to używane do łączenia ciągu znaków z liczbą.

const age = 30;
console.log(typeof age);
//number

const personInfo = name + ' ' + lastName + ' is ' + age + ' years old';
//'Jan Kowalski is 30 years old'

const backtickPersonInfo = `${name} ${lastName} is ${age} years old`;
//'Jan Kowalski is 30 years old'

Zanim przejdę do dalszych przykładów wyjaśnijmy, w jaki sposób interpreter JS łączy dane różnych typów.

JavaScript pod maską stara się dopasować do siebie typy łączonych danych. Mówimy o tzw. niejawnej konwersji typów. W wyniku konkatenacji stringa i liczby otrzymujemy nowy string:

const number = 11
const string = '2'

const add = number + string;
//'112'

console.log(typeof add)
//'string'

Stąd biorą się częste błędy. Jeśli przeoczymy, że nasza liczba została w którymś momencie przedstawiona jako string (np. przesłana z formularza), to wyniki mogą nas mocno zaskoczyć. Nas - albo użytkownika, jeśli nie wyłapiemy błędu na czas. Posługując się powyższym przykładem - jeśli pisząc kod zakładaliśmy, że zmienna string też byłaby typu number, to otrzymane 112 dość znacząco odbiegałoby od zakładanego 13, jeśli mielibyśmy do czynienia z dwoma liczbami.

Innymi typami, do których JS może wykonać niejawną konwersję są number oraz boolean.

Porównywanie stringów

Nie ma co ukrywać, stringi porównuje się bardzo często. O samym porównywaniu różnych wartości powiem więcej podczas omawiania typu boolean, ale o pewnych podstawach trzeba wspomnieć już teraz.

W JavaScript istnieje osiem logicznych operatorów. Są to:

• == (równe),
• === (równe ze sprawdzeniem typu),
• != (różne),
• !== (różne ze sprawdzeniem typu),
• > (większe),
• >= (większe lub równe),
• < (mniejsze),
• <= (mniejsze lub równe).

Najrzadziej wykorzystuje się porównania wykonywane bez sprawdzania typów (== oraz !=), ale o tym kiedy indziej.

Podczas porównywania stringów należy pamiętać o kilku kwestiach. Przede wszystkim stringi są case sensitive, czyli wielkość ma znaczenie - liter oczywiście 😉.

Po drugie w przypadku porównywania, który string jest mniejszy/większy pod uwagę brana jest bezwzględnie kolejność alfabetyczna. Niby oczywiste, ale kiedy mamy w stringu liczbę, to już może być ciekawie.

Pusty string jest tzw. wartością falsy, czyli jest zawsze fałszywy logicznie.

'Ala' === 'ala'; //false
'11' > '2' //false
!!'' //false

Typ jest obiektem!!!

Chciałbym jeszcze raz wrócić do definicji typu string (MDN):

The String object is used to represent and manipulate a sequence of characters.

Słowo object znalazło się tutaj nieprzypadkowo. JavaScript wszystkie typy traktuje jak obiekty. Obiekty, które mają swoje metody i właściwości. Polecam zajrzeć na linkowaną już kilkukrotnie stronę MDN poświęconą stringom. Tam, w menu po lewej stronie znajdziecie wszystkie metody, jakie posiada obiekt string. Poniżej zaś znajdziecie te najpopularniejsze.

Długość stringa

Każdy ciąg znaków posiada jakąś długość. Jest to nic innego, jak ilość znaków (włącznie ze spacjami itp.), jakie na dany ciąg się składają. Wartość tę możemy sprawdzić poprzez metodę length

const string = 'Ala';
const longerString = 'Żyrafa';
const spaceString = ' ';
const emptyString = '';

console.log(string.length)
//3

console.log(longerString.length)
//6

console.log(spaceString.length)
//1

console.log(emptyString.length)
//0

Przeszukiwanie stringów

Poza wiedzą, jaką string ma długość możemy także sprawdzić, jaki znak znajduje się w konkretnym miejscu naszego ciągu. Są na to dwie metody: charAt() lub bezpośrednie odwołanie się do poszukiwanego indeksu (dokładnie w taki sam sposób, jak w tablicach).

const string = 'Ala';

console.log(string.charAt(1));
//'l'

console.log(string.charAt(3))
//''

console.log(string[1]]);
//'l'

console.log(string[3])
//undefined

Należy bezwzględnie pamiętać, że indeksowanie zaczyna się od wartości 0! To znaczy, że pierwszy znak ciągu będzie miał indeks równy 0, zaś ostatni length - 1

W przypadku metody charAt() - jeśli będziemy chcieli sprawdzić znak o nieistniejącym indeksie, to otrzymamy pusty string. Nieco inaczej wygląda to przy bezpośrednim odwołaniu do indeksu. W takiej sytuacji, jeśli poszukiwany indeks nie będzie istniał, to dostaniemy wartość undefined.

Ciekawą metodą na przeszukiwanie stringów jest też metod at(). Działa ona bardzo podobnie do charAt() - z tym, że pozwala także na przeszukiwanie ciągu od końca. Można to zrobić posługując się ujemnym indeksem.

Trzeba pamiętać, że w przypadku wyszukania nieistniejącego indeksu otrzymamy wartość undefined, podobnie jak to było przy bezpośrednim odniesieniu do indeksu!

const string = 'Ala ma kota.';

console.log(string.at(0));
//'A'

console.log(string.at(-2));
//'a'

console.log(string.at(12));
//undefined

console.log(string.charAt(-2));
//''

Wyszukiwanie fragmentu stringu

Czasami chcemy sprawdzić, czy dany string zawiera w sobie jakąś frazę. Może to być wyszukiwarka na stronie lub też jakiś element walidacji - zastosowań jest bardzo dużo. JavaScript daje nam metodę includes(), która pozwala nam bardzo łatwo przeszukiwać stringi.

const string = 'Jedzie pociąg z daleka.';
const search = 'pociąg';

string.includes(search) //true

Warto pamiętać o zasadach porównywania stringów w JavaScripcie. Jak wspominałem - wielkość liter ma znaczenie! Oczywiście jest sposób, żeby to obejść, ale o tym za chwilę.

Porównywanie z regexami

O samych wyrażeniach regularnych - czyli regexach - powiem prawdopodobnie więcej w osobnym wpisie. Na ten moment musicie tylko wiedzieć, czym są wyrażenia regularne i jak możemy je wykorzystać w pracy ze stringami.

Czym - w ogromnym skrócie - są wyrażenia regularne? To pewien wzór, który opisuje tekst do porównania. Warto wspomnieć, że regex nie jest biblioteką czy konkretnym językiem programowania.

Metoda match() pozwala właśnie na porównanie stringa do wyrażenia regularnego.

const regex = /[A-Z]/g;
const string = 'Ala ma kota';

const found = string.match(regex);
//['A']

W powyższym przykładzie sprawdzamy, czy w ciągu znaków występują dowolne wielkie litery. Wynikiem metody match() jest tablica zawierająca pasujące do wyrażenia znaki. Jeśli żaden symbol ze stringa nie pasuje do wyrażenia regularnego, to wynikiem będzie pusta tablica.

Przykładowo, jeśli chcemy sprawdzić, czy podany string jest adresem email, możemy użyć poniższego wzoru:

const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;
const email = 'test@e.mail';
const incorrectEmail = 'test.e.mail';

const isEmail = (string) => {
    return !!string.match(emailRegex)
};

isEmail(email); //true
isEmail(incorrectEmail); //false

Cięcie stringów

Czasami może się zdarzyć tak, że potrzebny nam jest tylko fragment stringa. Pomocna w tym jest metoda slice(), która jako argument przyjmuje index i zwraca nowy string. Indeksem jest numer znaku (liczony od 0), od którego chcemy zachować zawartość stringa.

const string 'Ala ma kota';
const short = string.slice(4);
//'ma kota'

Jeśli jako parametr podamy dwa indeksy, wówczas wynikiem będzie ciąg, który znajduje się między nimi:

const string 'Ala ma kota';
const short = string.slice(4, 6);
//'ma'

Za pomocą metody slice() można "wycinać" także fragmenty stringa od jego końca - wówczas użyjemy ujemnych indeksów.

const string 'Ala ma kota';
const short = string.slice(-5); //'kota.'
const shortRange = string.slice(-5, -1); //'kota'

Zamiana stringa w tablicę

Niekiedy jest tak, że chcemy zawartość stringa umieścić w tablicy, np. jako osobne słowa. Służy do tego metoda split(). Jako argument przyjmuje ciąg, który będzie użyty jako separator. Wynikiem jest - co dość oczywiste - tablica.

const string 'Ala ma kota';
const short = string.split(' '); 
//['Ala', 'ma', 'kota.']

Powyżej jako separatora użyliśmy spacji (' '), przez co w tablicy możemy znaleźć pojedyncze wyrazy z ciągu. Jeśli chcielibyśmy utworzyć tablicę z pojedynczych znaków, to jako argument musielibyśmy podać pusty ciąg (''):

const string 'Ala ma kota';
const short = string.split(''); 
//["A", "l", "a", " ", "m", "a", " ", "k", "o", "t", "a", "."]

Warto zauważyć, że w tym przypadku w tablicy znajdziemy także spacje, znaki specjalne, interpunkcyjne itp. Istnieją oczywiście sposoby, żeby się ich pozbyć z finalnej tablicy - ale póki co zostawmy to, jak jest.

Zmiana wielkości znaków

Może się zdarzyć, że będziemy chcieli, żeby zmienić wielkość litery w naszym ciągu znaków. Czasami są to względy estetyczne, np. aby zapisać jakiś tytuł kapitalikami. Innym razem będziemy chcieli porównać ze sobą dwa ciągi znaków, upewniając się, że wielkość znaków nie wpłynie na wynik (a jak było wspomniane - wielkość znaków jest przy porównaniach istotna). Wówczas możemy skorzystać z metod toLowerCase() lub toUpperCase(). Wynikiem będzie nowy string.

const string = 'Ala ma kota.';

string.toLowerCase(); //'ala ma kota.'
string.toUpperCase(); //'ALA MA KOTA.'

const test = 'Marek';

'marek' === string; //false
'marek'.toLowerCase === test.toLowerCase; //true
'marek'.toUpperCase === test.toUpperCase; //true

To wszystko?

Oczywiście, że nie. Obiekt string posiada jeszcze kilka innych, rzadziej używanych metod. Wszystkie znajdziecie na wspominanej już stronie MDN. Gorąco zachęcam do ich przejrzenia i potestowania.

Template literals

Pamiętacie, jak wspominałem wcześniej, że jeszcze wrócimy do deklarowania stringów za pomocą backticków? No to właśnie wracamy 😉

Być może spotkaliście się kiedyś z terminem ES lub ECMAScript. W ten sposób oznacza się oficjalne wersje języka JavaScript. Numer, jaki występuje po tym ES oznacza wersję lub rok, w którym wersja została wypuszczona. Na przykład mamy ES6, co jest dokładnie tą samą wersją, co ES2015.

Czemu o tym wspominam? Ponieważ wersja ES6 była prawdziwą rewolucją dla JavaScriptu. Jedną z nowości, jakie przyniosła były właśnie template literals, lub - jak kto woli - template string. I jest to właśnie zapis stringów za pomocą backticków.

Ok, a co w tym takiego niezwykłego? Ot, nowa forma zapisu. Noooo... nie do końca. Template literals bardzo rozbudowują możliwości pracy ze stringami. Jak choćby już wspomniane użycie zmiennych wewnątrz stringa (co nazywamy interpolacją stringów).

const number = 2;

const string = `Ala ma ${number} koty.`
// 'Ala ma 2 koty.'

Ale to nie wszystkie możliwości, jakie daje użycie template literals. Pozwalają one także na utworzenie stringów wielowierszowych bez konieczności posiłkowania się znakiem nowej linii (\n):

const oldNotation = 'Ala ma: \n- 2koty, \n- psa, \n- chomika.';
/*
Ala ma:
- 2 koty,
- psa,
- chomika.
*/

const template = `Ala ma:
- 2 koty,
- psa,
- chomika.`

/*
Ala ma:
- 2 koty,
- psa,
- chomika.
*/

Ponadto template literals pozwalają na użycie wyrażeń javascriptowych wewnątrz stringów.

const isLoggedIn = true;
const userName = 'Marek';

const greeting = `Witaj, ${isLoggedIn ? username : 'Gościu'}!`;
// 'Witaj, Marek!

Template literals oferują także kilka innych możliwości, o których można przeczytać na stronie MDN.

Co dalej?

Ok, poznaliśmy najważniejsze informacje na temat danych typu string, najważniejsze operacje, jakie możemy na nich przeprowadzać oraz najczęściej stosowane metody.

Myślę, że w następnej części tej serii na tapet weźmiemy dane typu number. A tymczasem zapraszam na mojego twixera 😊

Do następnego!