Split, slice i inne metody #8

Metody String

Na typie string możemy wywołać kilka przydatnych metod. Ponieważ string jest bardzo popularną wartością w JavaScript, warto zwróci uwagę na kilka metod. Nie będę każdej metody omawiał w szczegółach, raczej pokażę wam ogólne użycie. Jednak każda z nich ma wiele możliwości i kombinacji, dlatego
warto zaglądać do dokumentacji na stronie MDN.

Waszym zadaniem nie jest zapamiętanie tych wszystkich metod, a orientacja w temacie, jakie metody istnieją i jak je używać.

Istotne jest także to, że metody wywoływane na wartości string nie modyfikują jej. Wartość string jest immutable, a więc nigdy się nie zmienia. Każda metoda wywołana na wartości string zwraca nową wartość, starą pozostawiając bez zmian. Przyjrzymy się zatem kilku metodom.

String jest iterable

Na początek warto zwrócić uwagę, że wartości string są iterowalne. Nie zachowują się dokładnie jak tablice w JavaScript, ale wciąż możemy pobrać pojedynczy znak z wartości string lub sprawdzić długość wartości.

const text = 'Lorem ipsum';
console.log(text.length); // 11
console.log(text.charAt(0)); // 'L'
console.log(text[10]); // m

Możemy wykorzystać właściwość length do pobrania długości stringa. Natomiast metodę charAt() do pobrania konkretnego znaku z wartości string za pomocą indeksu. W tym przypadku pobieram znak 0 czyli pierwszą literę tekstu. Jak w wielu językach tak i w JavaScript iteracje zaczynają się od
indeksu 0.

Do stringa możemy odwołać się także jak do tablicy i podać konkretny indeks w klamrach. W tym przypadku pobieram ostatni znak wartości string.

Dzięki temu, że string jest iterowalny, mogę użyć prostej pętli for i pobrać każdą literę tekstu:

for (let i = 0; i < text.length; i++) {
  console.log(text.charAt(i));
}

Poniekąd więc, możemy wartości string traktować jak zmienne tablicowe. Nadal jednak różnice są spore. Główna to taka, że string jest immutable, więc metody uruchamiane na stringu nie modyfikują wartości, ale zwracają nową zmodyfikowaną wartość.

Druga różnica to taka, że wiele metod, które są dostępne na tablicach, nie możemy uruchamiać na stringach, no, chyba że jawnie przekształcimy string na tablicę. Mamy więc jedynie pewne podobieństwa.

Zamiana string na tablicę przez `split()`

Przekształcanie stringa na tablicę, będzie dość częstą operacją w Waszym kodzie. Możemy to zrobić za pomocą gotowej metodysplit():

const name = 'Jasme Bond';
const names = name.split(' ');
console.log(names); // [ 'Jasme', 'Bond' ]

Do metody split() możemy przekazać parametr, który jest separatorem, według którego string będzie dzielony na tablicę. W tym przypadku podzielimy wartość string w miejscu, gdzie występuje spacja i otrzymamy tablicę z dwoma elementami.

Separator może być bardziej skomplikowany, zobaczmy taki przykład:

const monthString = 'Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec'
const array = monthString.split(', ')
console.log(array);

  [
    'Jan', 'Feb', 'Mar',
    'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep',
    'Oct', 'Nov', 'Dec'
  ]

W tym przypadku otrzymamy tablicę z 12 elementami, a wzorcem do podziału jest przecinek i spacja. Jak widzimy, sam wzorzec nie jest ujęty w tablicy z wynikami, jest natomiast usuwany.

Możemy również podać pusty separator:

const number = '1234567890'
const numbers = number.split('');
console.log(numbers); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]

Ponieważ naszym separatorem jest pusty string, stworzymy tablicę, w której każdy znak będzie oddzielnym elementem. Tym właśnie sposobem, możemy każdą wartość string przekonwertować na tablicę znaków.

To samo możemy uzyskać przez destrukturyzację, z którą zapoznamy się przy tablicach i obiektach, ale można ją też wykonać na wartości typu string;

console.log([...number]); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]

Wstawiając wartość string w klamry i poprzedzając wartość trzema kropkami, możemy ją rozbić na tablicę znaków.

Podział stringa przez `slice()`

Typ string posiada do dyspozycji metodę slice(), która wycina określone części i zwraca jako nową wartość:

const example = 'JavaScript'
console.log(example.slice(0, 4)); // Java

Do slice() podajemy zazwyczaj dwa parametry. Pierwszy określa, od którego indeksu zaczynamy, a drugi określa, przed którym indeksem kończymy. Podając pierwszą wartość jako 0, zaczynamy od pierwszego znaku, wartość 4 mówi o tym, aby zakończyć pobieranie przed 4 znakiem.

Stosując różne kombinacje w metodzie slice() możemy przez wartości ujemne pobrać ostatnie znaki:

console.log(example.slice(-6)); // Script

W ten sposób pobieramy tylko wartość Script, a indeksy liczone są tym razem od tyłu. Wartość -6 pobiera dokładnie sześć ostatnich znaków.

Zobaczmy jeszcze jeden przykład z wartościami ujemnymi:

console.log(example.slice(-4, -1)); // rip

Tym razem pobieramy cztery ostatnie znaki co daje nam wartość ript ale ucinamy jeszcze ostatni znak, i dostajemy wartość rip.

Jest to jedna z metod, przy której często powstają wątpliwości, jak działa. Dlatego warto ją poćwiczyć i wspierać się dokumentacją. Wystarczy otworzyć konsolę w przeglądarce i można przetestować jej działanie. Również często padają pytania o tą metodę na rozmowach o pracę. Niestety nie jest ona zbyt
intuicyjna i uwierzcie mi, że wielu doświadczonych programistów wciąż ma z nią problem.

Normalizacja i porównanie `string`

Bardzo często staniemy też przed porównaniem dwóch wartości string. Możemy do tego oczywiście zastosować potrójny operator porównania. Przykładem są dwie identyczne wartości string:

const agent = 'James Bond';
const agent2 = 'Jasmes Bond';
console.log(agent === agent); // true

W tym przypadku otrzymujemy wartość true. Zgadzają się zarówno wartości, jak i typy zmiennych. Nie jesteśmy tu niczym zaskoczeni przez JavaScript i w ten właśnie sposób możemy porównać dwie wartości string.

Nie zawsze jednak mamy tak proste przypadki. Czasami te same wartości mogą wyglądać różnie jak w tym przypadku:

const mail = 'bond@example.com'
const mail2 = ' Bond@example.com   '
console.log(mail === mail2); // false

Porównanie tych dwóch wartości, nie uda się. Występują różnice w wielkości liter, a także puste znaki. Możemy użyć dodatkowych metod jak trim() do obcinania pustych znaków czy toLowerCase(), która konwertuje wszystkie znaki do małych liter.

const email = mail.trim().toLocaleLowerCase();
const emai2 = mail2.trim().toLocaleLowerCase();
console.log(email === emai2); // true

Tym sposobem dokonamy normalizacji przed porównaniem dwóch wartości string. Ponieważ często będziemy porównywać wartości wpisywane przez użytkowników, taka normalizacja jest niemalże wymagana.

Pozostałe metody

String posiada o wiele metod, których już nie będę omawiał, a zwrócę na nie uwagę. Metody, którymi warto się jeszcze zainteresować to na pewno:

startWith() - sprawdza, czy wartość zaczyna się od określonych znaków:

const str1 = 'www.example.com'
console.log(str1.startsWith('www')); // true

endsWith() - sprawdza, czy wartość kończy się określonymi znakami:

console.log(str1.endsWith('com')) // true

replace() - wyszukuje wskazane znaki i zastępuje je podanymi wartościami:

console.log(str1.replace('www.', '')) // example.com

includes() - sprawdza, czy czy wartość string ma określone znaki:

console.log(str1.includes('www.')) // true

Zainteresowanych odsyłam do dokumentacji MDN, gdzie możemy eksperymentować z gotowymi przykładami. Również same metody często przyjmują dodatkowe parametry, rozszerzając funkcjonalność.

Jeżeli musimy dokonać manipulacji na wartości string, prawdopodobnie uzyskamy każdy efekt przez kombinację różnych metod. Jest to tylko kwestia połączenia ich możliwości. W Internecie znajdziemy też gotowe biblioteki, które mogą nam pomóc w manipulacjach na wartościach string. Warto korzystać z
gotowych rozwiązań.

Co warto zapamiętać:

wartości string są iterowalne, możemy pobrać długość stringa lub też wartość z konkretnej pozycji
string trochę przypomina typ tablicowy
metodą split() możemy podzielić wartość string na tablicę
metoda slice() służy do dzielenia wartości string według indeksów
porównanie możemy wykonać poprzez trzy znaki równości === warto jednak wcześniej znormalizować wartości
typ string posiada wiele metod, które łącząc ze sobą pozwolą nam dokonać każdej manipulacji