JavaScript – najbardziej przydatne funkcje typu łańcuchowego

Jest to kontynuacja artykułu na temat najbardziej przydatnych dla początkujących funkcji podstawowych typów danych używanych w języku JavaScript.

Poprzednią część znajdziesz tutaj.

Wstęp

Nieważne, czy dopiero wkraczasz w świat programowania i JavaScript jest Twoim pierwszym językiem, czy może, tak jak ja, rozpoczynasz swoją przygodę z JS-em mając już solidne podstawy w pisaniu kodu – w obu przypadkach koniecznym jest znajomość kluczowych funkcji, które pozwolą Ci na znacznie łatwiejsze wykonywanie podstawowych operacji. W tym artykule skupimy się na prototypach funkcyjnych typu łańcuchowego. Pozwalają one, na przykład, na zamianę kodu ASCII na litery, skrócenie łańcucha, bądź zmianę wielkości liter.

Lista funkcji przedstawionych w artykule:

1. toLowerCase()
2. toUpperCase()
3. charAt()
4. charCodeAt()
5. fromCharCode()
6. indexOf()
7. replace()
8. match()
9. trim()
10. split()
11. slice()
12. concat()
13. substr()
14. substring()

toLowerCase()

Funkcja toLowerCase(), wraz z toUpperCase(), jest jedną z podstawowych operacji, jakie możemy wykonać na łańcuchach. Pozwala ona na zmianę wielkości wszystkich liter w zmiennej na małe. Zmieniony łańcuch zostaje zwrócony, a oryginalny pozostaje niezmodyfikowany. Przykład:

var pismoNastolatkow = "kOcHaM sIę W tOmKu";

var poprawnaPolszczyzna = pismoNastolatkow.toLowerCase();

console.log(poprawnaPolszczyzna);  // kocham się w tomku

toUpperCase()

toUpperCase() działa na dokładnie takiej samej zasadzie, z tą różnicą, że zamienia wszystkie litery na duże. Zmieniony łańcuch zostaje zwrócony, a oryginalny pozostaje niezmodyfikowany. Przykład:

var mowa = "ktoś podprowadził mi moją słodką bułeczkę!";

var krzyk = mowa.toUpperCase();

console.log(krzyk);  // KTOŚ PODPROWADZIŁ MI MOJĄ SŁODKĄ BUŁECZKĘ!

charAt()

Nazwa funkcji charAt() wywodzi się, a jakby, z języka angielskiego (char to skrót od character, który oznacza znak) i składa się z dwóch części – char i At. Char oznacza „znak”, a At „na”, czyli funkcja zwraca znak, który znajduje się w zadanym miejscu łańcucha. Jako argument podajemy indeks znaku, który musi zawierać się w przedziale <0, długość łańcucha-1>. Przykład:

var alfabet = "aąbcćdeęfghijklłmnńoóprsśtuwyzźż";

console.log(alfabet.charAt(10));  // h

charCodeAt()

charCodeAt() działa praktycznie identycznie jak charAt(), z tym że zamiast zwracać znak w danym miejscu, zwraca kod ASCII tegoż znaku. W przykładzie będzie można łatwo zauważyć jak polskie znaki diakrytyczne wpływają na kodowanie liter. Przykład:

var alfabet = "aąbcćdeęfghijklłmnńoóprsśtuwyzźż";
var alfabetTablica = [];

for (var i = 0; i < alfabet.length; i++) //>
{
	alfabetTablica.push(alfabet.charCodeAt(i));
}

console.log(alfabetTablica);
/*
	[97, 261, 98, 99, 263, 100, 101, 281, 102, 103, 104, 
	105, 106, 107, 108, 322, 109, 110, 324, 111, 243, 112,
	114, 115, 347, 116, 117, 119, 121, 122, 378, 380]
*/

fromCharCode()

Funkcja fromCharCode() działa w sposób odwrotny do charCodeAt() – jako argument podajemy zakodowaną wartość znaku, a funkcja zwraca nam znak. Zwróć uwagę, że jest to wbudowana metoda typu String, więc musimy używać jej w nastepujący sposób: String.fromCharCode(). Możemy dzięki niej w prosty sposób odzyskać polski alfabet z poprzedniego przykładu. Przykład:

var alfabetTablica = [97, 261, 98, 99, 263, 100, 101, 281, 102, 103, 104, 
	105, 106, 107, 108, 322, 109, 110, 324, 111, 243, 112,
	114, 115, 347, 116, 117, 119, 121, 122, 378, 380];
var alfabet = "";

for (var i = 0; i < alfabetTablica.length; i++) //>
{
	alfabet = alfabet + String.fromCharCode(alfabetTablica[i]);
}

console.log(alfabet);  // aąbcćdeęfghijklłmnńoóprsśtuwyzźż

indexOf()

Kolejna funkcja, którą poznamy, to indexOf(). Jako argument podajemy jej znak, a funkcja wyszuka i zwróci indeks jego pierwszego wystąpienia. Jeśli znak nie pojawia się w danym łańcuchu, to zostaje zwrócona wartość -1. Przykład:

var znajdzLitere = "oooooooooooooooooooooooooooooóoooooooooooooooo";

var pozycjaLitery = znajdzLitere.indexOf("ó");

console.log (pozycjaLitery);  // 29

replace()

Z odpowiednikiem funkcji replace() miał do czynienia każdy, kto używa komputera. Wyszukuje ona ciag znaków podany jako argument pierwszy argument i zastępuje innym ciągiem, który jest przekazany na drugim miejscu. Funkcja replace() jest także pierwszą z omawianych funkcji, która jako argument może przyjmować wyrażenie regularne (o których już wkrótce pojawi się osobny artykuł; w skrócie regEx). Funkcja nie modyfikuje oryginalnego łańcucha, lecz zwraca nowy. Przykład:

var dewiza = "Najpierw pomyśl, poźniej programuj";

var lepszaDewiza = dewiza.replace("pomyśl", "programuj");

console.log(lepszaDewiza); // Najpierw programuj, później programuj

match()

match() jest kolejną funkcją zdolną do wykorzystania regEx, co czyni ją niezwykle wszechstronną i użyteczną. Funkcja przyjmuje jeden parametr i wymaga, aby było to wyrażenie regularne. match() zwraca tablicę wszystkich wystąpień zgodnych z wyrażeniem. Jeśli nie wystąpiła żadna zgodność, to zwracana jest wartosć null. Przykład:

/*
wyrażenie regularne wykonywanie globalnie (g) wybierające,
tylko wyrazy (\w+) zaczynające się od liter a-z ([a-z])
LUB (|) wyrazy (\w+) zaczynające się od liter A-Z ([A-Z]) 
*/
var wyrazenie = /[a-z]\w+|[A-Z]\w+/g;
var slowa = [];

var mieszanka = "123 Ala 23 ma 4 koty";

slowa = mieszanka.match(wyrazenie);

// wypisujemy w konsoli elementy tablicy słowa 
// przekonwertowane na łańcuch i oddzielone spacją
console.log(slowa.join(" "));  // Ala ma koty

trim()

Działanie funkcji trim() i opiera się na usuwaniu znaków białych zarówno z początku, jak i końca łańcucha. Bardzo użyteczna przy normalizacji danych. Funkcja zwraca zmodyfikowany łańcuch. Przykład:

var zlyPrzyklad = "  Warszawa ";

var dobryPrzyklad = zlyPrzyklad.trim();

console.log(dobryPrzyklad) // "Warszawa"

split()

split() jest przeciwieństwem metody typu tablicowego join() – jako argument przyjmuje separator, według którego dzieli łańcuch i umieszcza poszczególne podciągi w tablicy. Utworzona tablica jest zwracana, a oryginalny łańcuch pozostaje nietknięty. Przykład:

var dlugiLancuch = "a ą b c ć d e ę f g h i j k l ł m n ń o ó p r s ś t u w y z ź ż";

var literyAlfabetu = dlugiLancuch.split(" ");

console.log(literyAlfabetu);
/*
["a", "ą", "b", "c", "ć", "d", "e", "ę", "f", "g", "h", "i", "j", "k", "l", "ł", 
 "m", "n", "ń", "o", "ó", "p", "r", "s", "ś", "t", "u", "w", "y", "z", "ź", "ż"]
*/

slice()

Podobnie jak immienik typu tablicowego, tak i slice() typu łańcuchowego służy do wydobywania ze zmiennej określonych danych. Funkcja przyjmuje jako pierwszy argument indeks znaku, od którego ma rozpocząć wycinanie, a jako drugi indeks znaku, przed którym ma skończyć. Przedział działania funkcji slice() można określić jako <początek, koniec). Jeśli drugi argument nie zostanie podany, to funkcja zakończy działanie na ostatnim znaku łańcuchu. Funkcja zwraca wycięty element, a oryginalny łańcuch pozostaje niezmieniony. Przykład:

var lancuch = "zjadłbym kebaba, ale nie mam pieniędzy";

// wybieramy łańcuch o długości 6 znaków ze środka zmiennej lancuch
var srodekLancucha = lancuch.slice((lancuch.length / 2) -3, (lancuch.length / 2) +3);

console.log(srodekLancucha);  // " ale n"

concat()

concat() to funkcja o identycznym działaniu jak operator + w kontekście łączenia łańcuchów. Wywołuje się ją na rzecz łańcucha, do którego chcemy dołączyć inne. Jako argumenty podajemy łańcuch do dołączenia. Funkcja zwraca nowy łańcuch. Przykład:

var jeden = "Ala";
var dwa = "ma";
var trzy = "kota";

var zdanie = jeden.concat(dwa,trzy);
console.log (zdanie);  // Alamakota

substr()

Funkcja substr() jest w działaniu bardzo podobna do funkcji slice(), z tą różnicą, że jako drugi parametr przyjmuje ilość znaków do skopiowania, a nie punkt końcowy. Funkcja zwraca wycięty kawałek, a łańcuch, na rzecz którego funkcja została wywołana, pozostaje niezmienny. Jeśli nie podamy drugiego argument, to funkcja zakończy działanie na ostatnim znaku. Przykład:

var dlugas = "konstantynopolitańczykowianeczka";

var pierwszeDziesiec = dlugas.substr(0, 10);
var drugieDziesiec = dlugas.substr(10, 10);
var reszta = dlugas.substr(20);

console.log(pierwszeDziesiec);  // konstantyn
console.log(drugieDziesiec);    // opolitańcz
console.log(reszta);            // ykowianeczka

substring()

Funkcja substring() jest w działaniu praktycznie identyczna, jak wcześniej omawiana funkcja slice(). Różni je tylko to, że jeśli argument końcowy będzie miał mniejszą wartość niż argument początkowy, to funkcja zamieni je miejscami. Reszta jest identyczna – funkcja przyjmuje jako pierwszy argument indeks znaku, od którego ma rozpocząć wycinanie, a jako drugi indeks znaku, przed którym ma skończyć. Przedział działania funkcji slice() można określić jako <początek, koniec). Jeśli drugi argument nie zostanie podany, to funkcja zakończy działanie na ostatnim znaku łańcuchu. Funkcja zwraca wycięty element, a oryginalny łańcuch pozostaje niezmieniony. Przykład:

var lancuch = "prawdopodobnie najlepszy łańcuch na świecie";

// zamienimy kolejność argumentów, bo można
var przechwalka = lancuch.substring(32, 15);

console.log(przechwalka);  // najlepszy łańcuch

Podsumowanie

To już wszystkie najbardziej przydatne, najbardziej podstawowe i najczęściej wykorzystywane metody typu łańcuchowego String. Moim celem było stworzenie z tego artykułu swojego rodzaju dokumentacji, w której będę mógł w łatwy i szybki sposób znaleźć sposób użycia interesujących mnie funkcji – mam nadzieję, że Tobie także się przyda, czy to w nauce, czy w pracy, i że wyciągniesz z niego tyle, ile ja w trakcie jego pisania :) . Zachęcam Cię do zapoznania się z poprzednią częścią artykułu o najbardziej przydatnych funkcjach języka Javascript, gdzie omawiam metody typu tablicowego.

Bibliografia:

• https://vegibit.com/javascript-string-functions
• https://regexr.com/