Metody łańcuchowe, które warto znać w JavaScript

Sprawne operowanie na sekwencjach znaków bez solidnej wiedzy o dostępnych metodach może stanowić spore wyzwanie dla programistów.

Aby ułatwić pracę i uniknąć potencjalnych problemów, kluczowe jest dogłębne zrozumienie najważniejszych właściwości i metod operujących na stringach w JavaScript.

Przeanalizujmy je krok po kroku.

Długość łańcucha

Właściwość `length` dostarcza informacji o liczbie znaków tworzących dany ciąg.

const company = "newsblog.pl";

console.log(company.length);

Konwersja do wielkich liter

Metoda `toUpperCase()` przekształca wszystkie litery w stringu na ich wielkie odpowiedniki. Zwraca nowy string, pozostawiając oryginalny bez zmian.

const company = "newsblog.pl";

const upperCaseCompany = company.toUpperCase();

console.log(upperCaseCompany);

Konwersja do małych liter

Metoda `toLowerCase()` działa analogicznie do `toUpperCase()`, z tą różnicą, że zamienia wszystkie litery na małe. Oryginalny string pozostaje nietknięty.

const company = "newsblog.pl";

const lowerCaseCompany = company.toLowerCase();

console.log(lowerCaseCompany);

Usuwanie białych znaków

Metoda `trim()` usuwa wszelkie spacje znajdujące się na początku i końcu łańcucha. Działa „w miejscu”, co oznacza, że aktualizuje oryginalny string.

const company = "         Geek   Flare           ";

console.log(company);
console.log(company.trim());

Pobieranie znaku na danej pozycji

Metoda `charAt(indeks)` zwraca znak z stringa, który znajduje się na określonej pozycji (indeksie). W przypadku nieprawidłowego indeksu, zwracany jest pusty ciąg.

const company = "newsblog.pl";

console.log(company.charAt(2));
console.log(company.charAt(10));

Pobieranie kodu ASCII znaku

Metoda `charCodeAt(indeks)` zwraca kod ASCII znaku, który znajduje się na określonej pozycji w stringu. Jeżeli indeks jest nieprawidłowy, wynikiem będzie `NaN`.

const company = "newsblog.pl";

console.log(company.charCodeAt(2));
console.log(company.charCodeAt(10));

Wycinanie fragmentu stringa

Metoda `slice(startIndex, endIndex)` wyodrębnia fragment stringa, zaczynając od pozycji `startIndex` aż do pozycji `endIndex` (ale bez włączania znaku z tej pozycji). Przykładowo, `string.slice(0, 6)` zwróci podciąg od indeksu 0 do 5.

const company = "newsblog.pl";

console.log(company.slice(0, 4));

Metoda `slice()` akceptuje również pojedynczy argument. W takim przypadku, zwraca podciąg od podanego indeksu aż do końca łańcucha.

const company = "newsblog.pl";

console.log(company.slice(4));

Co więcej, metoda `slice()` umożliwia korzystanie z indeksów ujemnych. Indeksy te są liczone od końca łańcucha. Przykładowo:

W stringu „newsblog.pl”, ujemne indeksy przedstawiają się następująco:

n = -11, e = -10, w = -9, s = -8, b = -7, l = -6, o = -5, g = -4, . = -3, p = -2, l = -1

Wywołanie `string.slice(-9, -5)` da w rezultacie „wsbl”.

const company = "newsblog.pl";

console.log(company.slice(-9, -5));

Wywołanie `string.slice(-5)` wyodrębni natomiast „.pl”.

const company = "newsblog.pl";

console.log(company.slice(-5));

Uwaga: Indeksy ujemne mogą nie działać poprawnie w starszych wersjach Internet Explorera (IE8 i starsze).

Wyodrębnianie podciągu o określonej długości

Metoda `substr(startIndex, length)` jest podobna do `slice()`, z tą różnicą, że jako drugi argument przyjmuje długość podciągu do wyodrębnienia.

const company = "newsblog.pl";

console.log(company.substr(4, 5));

Istnieje również metoda `substring()`, która działa podobnie do `slice()`, jednak nie akceptuje indeksów ujemnych. Zachęcam do samodzielnego przetestowania jej działania.

Zamiana fragmentu stringa

Metoda `replace(substring, newSubstring)` zastępuje pierwsze wystąpienie podanego podciągu (`substring`) w stringu nowym podciągiem (`newSubstring`).

const statement = "Visit the site Google";

console.log(statement.replace("Google", "newsblog.pl"));

Znajdowanie indeksu podciągu

Metoda `indexOf(substring)` zwraca indeks pierwszego wystąpienia danego podciągu w stringu. Jeśli podciąg nie zostanie znaleziony, wynikiem jest -1.

const company = "newsblog.pl";

console.log(company.indexOf("Flare"));
console.log(company.indexOf("o"));

Metoda `indexOf()` może również przyjąć drugi argument – indeks, od którego należy rozpocząć poszukiwanie podciągu.

const company = "newsblog.pl";

console.log(company.indexOf("e"));
console.log(company.indexOf("e", 5));

Podobną funkcjonalność oferuje metoda `lastIndexOf()`. Różnica polega na tym, że `lastIndexOf()` przeszukuje string od końca, zwracając indeks ostatniego wystąpienia danego znaku. Wypróbujmy `company.lastIndexOf(’e’)`.

Dzielenie stringa na podciągi

Metoda `split(substring)` dzieli string na mniejsze podciągi, wykorzystując podany separator. Zwraca tablicę podciągów.

const statement = "Visit, the, site, newsblog.pl";

console.log(statement.split(" "));
console.log(statement.split(", "));

Podsumowanie

To oczywiście nie wszystkie metody dostępne dla stringów w JavaScript. Zachęcam do zapoznania się z dokumentacją, gdzie znajdziesz dodatkowe funkcje, które mogą okazać się przydatne w specyficznych przypadkach.

Szukaj i eksperymentuj z tymi metodami, aby znaleźć idealne rozwiązanie dla swoich potrzeb.

Udanej nauki i kodowania! 🙂

Następnie zgłębiaj wiedzę o popularnych frameworkach JavaScript.