String - teksty w js

W Javascript tak samo jak w innych językach możemy operować nie tylko na liczbach, ale także na tekstach. Tekst powinien być zawarty w cudzysłowy lub apostrofy:

let text = "Ala ma kota, a kot ma Ale.";
console.log( text.length ); //pobieram długość tekstu - wypisze 26

text = text + 'Ala go lubi, a kot ją wcale...';
console.log(text); //wypisze "Ala ma kota, a kot ma Ale. Ala go lubi, a kot ją wcale..."


const word = "Siano ";
let text2 = "";
for (let i=0; i<10; i++) {
    text2 += word;
}
console.log(text2); //wypisze "Siano Siano Siano Siano Siano Siano Siano Siano Siano Siano"

Tak samo jak w przypadku innych typów prostych, tak i w przypadku tekstów do tworzenia zmiennych tego typu możemy użyć konstruktora by uzyskać obiekt:


const text = new String("Ala ma kota, a kot ma Ale");

Nie zaleca się jednak tej praktyki. Spowodowane jest to tym, że obiekty jak już było wcześniej powiedziane są typem referencyjnym, dlatego przy operacjach możemy dostawać dziwne wyniki:


//deklaracja za pomocą literału
const text1 = "abc";
const text2 = "abc";
console.log(text1 == text2); //true

//deklaracja za pomocą konstruktora
const text1 = new String("abc");
const text2 = new String("abc");
console.log(text1 === text2); //false, ponieważ porównujemy 2 obiekty, a nie wartości
console.log(typeof text1); //object

Pobieranie długości tekstu

Aby odczytać długość naszego tekstu posłużymy się właściwością length.


const text = "Ala ma kota";
text.length; //zwróci 11

Pobieranie znaku na danej pozycji

Do pobrania w tekście znaku na danej pozycji możemy zastosować 2 podejścia. Jedno z nich to użycie metody charAt(). Drugie - to odwoływanie się do liter tekstu jak do elementów tablicy - poprzez kwadratowe nawiasy. Zasady są te same co przy tablicach. Pierwsza litera ma index 0, a ostatnia text.length-1


const text = "Ala ma kota, a kot ma Ale";

console.log(text.charAt(0)); //A
console.log(text.charAt(4)); //m

console.log(text[0]); //A
console.log(text[4]); //m

console.log(text.charAt(text.length-1)); //e
console.log(text[text.length-1]); //e

Metoda z wykorzystaniem charAt() zadziała w każdej przeglądarce. Metoda z traktowaniem stringa jak tablicę zadziała w przeglądarkach od IE8 wzwyż, dlatego w skrajnych przypadkach (projekty które mają działać "wszędzie") warto uważać.

Pobieranie kodu znaku za pomocą charCodeAt()

Metoda charCodeAt() zwraca nam kod ASCII znaku na pozycji podanej w parametrze.


const text = "Ala ma kota";

console.log(text.charCodeAt(0)); //65 (A)
console.log(text.charCodeAt(4)); //109 (m)

Zmiana wielkości liter za pomocą metod toUpperCase() i toLowerCase()

Metody toUpperCase() i toLowerCase() służą odpowiednio do zamieniania tekstu na duże i małe litery.


const text = "Ala ma kota";

console.log(text.toUpperCase()); //ALA MA KOTA
console.log(text.toLowerCase()); //ala ma kota

Zmiana tylko pierwszych liter w słowach

Korzystając z powyższych metod możemy pokusić się o napisanie własnej funkcji, która będzie w przekazanym słowie zamieniać na dużą tylko pierwszą literę:


const text = "marcin";
console.log( text.charAt(0).toUpperCase() + text.slice(1) ); //Marcin

Sprawdzanie pozycji podtekstu za pomocą metody indexOf() i lastIndexOf()

Metoda indexOf służy do podawania pozycji szukanego fragmentu w tekście (ale także w tablicy, bo metoda ta dostępna jest dla stringów i tablic). Jeżeli zwróconą wartością jest -1, to szukanego tekstu nie ma:


"Ala ma kota".indexOf("kot"); //7

const text = "Ala ma kota";

//sprawdzamy czy ciąg "psa" istnieje
if (text.indexOf("psa") > -1) {
    console.log("Ala ma psa" );
} else {
    console.log("Ala ma kota" );
}

Podobne działanie ma metoda lastIndexOf, podaje ona jednak numer ostatniego wystąpienia podtekstu


"Ala ma kota i tak już jest".lastIndexOf("a"); //15 - bo ostatnia litera występuje na pozycji 15


const url = "http://nazwastrony.pl/przykladowaNazwaPliku.php";

//korzystając z metod opisanych poniżej tniemy url na części
console.log( url.slice(url.lastIndexOf(".")+1) ); //php
console.log( url.slice(url.lastIndexOf("/")+1, url.lastIndexOf(".")) ); //przykladowaNazwaPliku

Przy nowych wersjach JS istnieje też metoda includes(str), która także służy do wyszukiwania podstringów. Różnica przy jej użyciu jest taka, że zamiast pozycji szukanego ciągu zwraca true/false:


const text = "Ala ma kota";

if (text.includes("psa")) {
    console.log("Ala ma psa" );
} else {
    console.log("Ala ma kota" );
}

Metoda ta i podobne opisałem w rozdziale o template string.

Pobieranie kawałka tekstu za pomocą metody substr()

Metoda substr(start, dlugosc) służy do pobierania kawałka tekstu. Pierwszym jej parametrem jest początek pobieranego kawałka tekstu, a drugi opcjonalny wskazuje długość pobieranego tekstu. Jeżeli drugi parametr nie zostanie podany, wówczas pobierany kawałek będzie pobierany do końca tekstu.


const text = "Ala ma kota";

console.log(text.substr(0)); //Ala ma kota
console.log(text.substr(0, 3)); //Ala
console.log(text.substr(7, 4)); //kota
console.log(text.substr(4, text.length - 4)); //wypisze tekst od 4 litery do końca - "ma kota"

Pobieranie kawałka tekstu za pomocą metody substring()

Metoda substring(start, stop) ma bardzo podobne działanie co powyższa. Różnicą jest drugi parametr, który zamiast długości wyznacza miejsce końca pobieranego kawałka. Jeżeli drugi parametr nie zostanie podany, wtedy kawałek będzie pobierany do końca tekstu. Jeżeli zostaną podane oba parametry, ale drugi będzie mniejszy od pierwszego, wtedy automatycznie zostaną one zamienione miejscami.


const text = "Ala ma kota";

console.log(text.substring(0, 3)); //Ala
console.log(text.substring(3)); //ma kota
console.log("Ala ma kota".substring(6, 4)); //ma

Przycinanie tekstu za pomocą metody slice()

Tekst jest uporządkowanym ciagiem znaków.
Tak samo jak w przypadku tablic, tak i w przypadku zmiennych tekstowych możemy skorzystać z metody slice(start, stop), która "tnie" nasz tekst i tworzy w ten sposób nowy. Jej działanie jest praktycznie identyczne do działania metody substring(), jednak występują małe różnice. Jeżeli drugi argument będzie mniejszy od pierwszego, wtedy w przeciwieństwie do substring() argumenty nie zostaną zamienione miejscami.


const txt = "Ala ma kota";

const txt2 = txt.slice(0,3);
console.log(txt2); //Ala

const txt3 = txt.slice(1,5);
console.log(txt3); //la m

const txt4 = txt.slice(4 , 6);
console.log(txt4); //ma

const txt5 = txt.slice(4);
console.log(txt5); //ma kota

const txt6 = txt.slice(-4);
console.log("Ala już nie ma " + txt6 + ", bo kocur jej zwiał..."); //Ala już nie ma kota, bo kocur jej zwiał...

Dzielenie tekstu pomocą metody split()

Metoda split(znak, długość) dzieli tekst na części, w wyniku zwracając tablicę. Miejsce podziału jest podawane w parametrze znak, a maksymalna ilość zwracanych elementów w parametrze długość:


const text = "Ala ma kota, a kot ma Alę, Ala go kocha, a Kot ją wcale ;("
const pieces = text.split(", ");

for (let i=0; i<pieces.length; i++) {
    console.log(pieces[i].toUpperCase()); //wypisze kolejne części zdania dużymi literami
}

Zamiana tekstu za pomocą metody replace()

Metoda replace(ciag_szukany, zamieniony) służy do zamiany szukanych kawałków tekstu na inny tekst.


const text = "Ala ma kota, a kot ma Alę, Ala go kocha, a Kot ją wcale ;("
const textChanged = text.replace("Ala", "Ola");

console.log(textChanged);

W powyższym przykładzie, zamieniona zostanie tylko pierwsza Ala. Aby wszystkie Ale zamieniły się na Ole, musimy zastosować wyrażenie regularne, nakazujące wyszukanie wszystkich Ali.


const text = "Ala ma kota, a kot ma Alę, Ala go kocha, a Kot ją wcale ;("
const textChanged = text.replace(/Al/g,"Ol");

console.log(text);
console.log(textChanged);

Kodowanie tekstu za pomocą funkcji encodeURI()

Podobnie jak w JS czy w HTML także i w adresach url pewne znaki mają specjalne znaczenie:

, spacja - # _ & % [ ] & ; : ? " ( ) ~ | ` !

Dlatego jeżeli chcielibyśmy ich użyć np w nazwach zmiennych przekazywanych za pomocą adresu, wtedy musimy je zakodować.

Do takiego zakodowania służy metoda encodeURI()


const text = "Ala ma kota, a kot ma Alę...";

console.log("Przed: " + text); //Ala ma kota, a kot ma Alę...
console.log("Po: " + encodeURI(text)); //Ala%20ma%20kota%2C%20a%20kot%20ma%20Al%u0119...

Rozkodowanie tekstu za pomocą funkcji decodeURI()

Jeżeli teraz chcemy odkodować zakodowany tekst, musimy użyć funkcji decodeURI():


const text = "Ala ma kota, a kot ma Alę...";

text = encodeUrl(text);

console.log("Przed: " + text); //Ala%20ma%20kota%2C%20a%20kot%20ma%20Al%u0119...
console.log("Po: " + decodeURI(text)); //Ala ma kota, a kot ma Alę...

Trening czyni mistrza

Poniżej zamieszczam kilka zadań, które w ramach ćwiczenia możesz wykonać:

  1. Stwórz zmienną text z dowolnym zdaniem. Wypisz w konsoli to zdanie i jego długość.
    
                    const text = "Ala ma kota";
                    console.log(text, text.length);
                
  2. Mamy tekst:
    
                const text2 = "Bardzo lubię jeść marchewkę";
            
    Wypisz w konsoli liczbę wyrazów w tym zdaniu.
    
                    const words = text2.split(" ");
                    console.log(words.length);
                
  3. Ktoś w formularzu wpisał imię z małej litery. Super bohater wkracza do akcji i musi je poprawić:
    
                let name = "marcin"
            
    Popraw to imię tak by zaczynało się dużą literą.
    
                    let name = "marcin";
                    name = name.charAt(0).toUpperCase() + name.slice(1);
                    console.log(name);
                
  4. Mamy zmienną:
    
                const email = "loremimpsum@gmail.com";
            
    Sprawdź czy występuje w niej znak @. Jeżeli tak wypisz w konsoli "email zawiera @", w przeciwnym razie wypisz "email nie zawiera @"
    
                const email = "loremimpsum@gmail.com";
    
                if (email.indexOf('@') !== -1) {
                    console.log('email zawiera @');
                } else {
                    console.log('email nie zawiera @');
                }
                
  5. 
                const text = "Uczę się stringów w C++";
            

    Korzystając z indexOf, lastIndefOf, i którejkolwiek metody do wycinania fragmentów tekstu uzyskaj tekst: "Uczę się stringów w Javascript". Nie wykorzystuj replace().

    
                    const text = "Uczę się stringów w C++";
    
                    const textPart = text.slice(0, text.indexOf('C++'));
                    const textFix = textPart + "Javascript";
                    console.log(textFix);
                
  6. Powiedzmy, że mamy zmienną z adresem strony:
    
                let url = "http://mojastrona.pl"
            

    Chcemy do tego adresu po znaku zapytania wstawić zmienną "text", którą potem ewentualnie mogła by odczytać inna podstrona.
    Zmienna ta powinna mieć wartość tekstu z 5 zadania:

    
                let url = "http://mojastrona.pl?text=Uczę się stringów w Javascript"
            

    Jak wiesz, spacji i podobnych znaków nie może być w adresie strony. Za pomocą odpowiednich zmiennych, dodawania i wykorzystując odpowiednie metody uzyskaj prawidłowy odpowiednio zakodowany adres url.

    
                    let url = "http://mojastrona.pl";
                    const text = "Uczę się stringów w Javascript";
                    url = url + "?text=" + encodeURI(text);
    
                    console.log(url);
                
  7. Mamy zmienną:
    
                const text = "ALA ma kota";
            

    Wypisz w konsoli:
    - tekst pisany małymi literami
    - tekst pisany dużymi literami
    - tekst pisany naprzemiennie dużymi i małymi literami

    Zamień imię AlA na OLA i wypisz wynik w konsoli

    Wypisz w konsoli fragment " ma Alę"

    
                    const text = "ALA ma kota";
                    console.log(text.toLowerCase());
                    console.log(text.toUpperCase());
    
                    let textMix = '';
                    for (let i=0; i<text.length; i++) {
                        if (i%2===0) {
                            textMix += text.charAt(i).toLowerCase();
                        } else {
                            textMix += text.charAt(i).toUpperCase();
                        }
                    }
                    console.log(textMix);
    
                    const text2 = text.replace("ALA", "OLA");
                    console.log(text2);