String - teksty

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:

var 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..."

var word = "Siano ";
var text2 = '';
for (var 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:


var text = new String('Ala ma kota, a kot ma Ale');

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


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

//deklaracja za pomocą konstruktora
var text1 = new String('abc');
var text2 = new String('abc');
console.log(text1 === text2); //false, ponieważ porównujemy 2 referencje, a nie wartości

Pobieranie długości tekstu za pomocą właściwości length

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


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

Pobieranie znaku za pomocą charAt()

Metoda charAt() służy do pobrania znaku na danej pozycji


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

console.log(text.charAt(0)); //wypisze "A", bo stringi tak jak tablice indeksowane są od 0
console.log(text.charAt(4)); //wypisze się "m"
console.log(text.charAt(text.length-1)); //wypisze "e", bo tekst.length-1 to ostatni element tablicy i tekstu

Pobieranie kodu znaku za pomocą charCodeAt()

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


var text = "Ala ma kota";

console.log(text.charCodeAt(0)); //wypisze się 65 (A)
console.log(text.charCodeAt(4)); //wypisze się 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.


var text = "Ala ma kota";

console.log(text.toUpperCase()); //wypisze sie "ALA MA KOTA"
console.log(text.toLowerCase()); //wypisze sie "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ę:


function capitaliseFirstLetter(text) {
    return text.charAt(0).toUpperCase() + string.slice(1);
}

console.log(capitaliseFirstLetter('ala ma kota')); //wypisze "Ala ma kota"

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

Metoda indexOf służy do podawania pozycji szukanego fragmentu w tekście. Jeżeli zwróconą wartością jest -1, to podtekstu nie ma:


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

var 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'); //wypisze 15, bo ostatnia litera występuje na pozycji 15

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

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

Kodowanie tekstu za pomocą funkcji encodeURI()

W niektórych przypadkach nie pożądane jest stosowanie pewnych znaków takich jak:

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

Jak wiadomo w adresie strony takie znaki nie mogą występować. To samo tyczy się nazw i wartości zmiennych zapisanych w tak zwanym query stringu (np. index.php?pierwsza_zmienna=wartosc1&druga_zmienna=wartosc2) czy też nazw i wartości zmiennych zapisanych w ciasteczkach.

Aby móc użyć tych znaków musimy nasz tekst przetworzyć za pomocą funkcji encodeURI()


var 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():


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

text = encodeUrl(tekst);

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

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.


var text = "Ala ma kota";

console.log(text.substr(0)); //wypisze sie "Ala ma kota"
console.log(text.substr(0, 3)); //wypisze sie "Ala"
console.log(text.substr(7, 4)); //wypisze sie "kota"
console.log(text.substr(4, tekst.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.


var text = "Ala ma kota";

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

Przycinanie tekstu za pomocą metody slice()

Nie wiem czy zauważyłeś, ale tekst jest rodzajem tablicy. Tak samo jak w tablicach mamy tutaj uporządkowane kilka zmiennych (liter).
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.


var zmienna = "Ala ma kota";

var zmienna_2 = zmienna.slice(0,3)
console.log(zmienna_2); //wypisze się Ala

var zmienna_2 = zmienna.slice(1,5)
console.log(zmienna_2); //wypisze się la m

var zmienna_2 = zmienna.slice(4 , 6)
console.log(zmienna_2); //wypisze się ma

var zmienna_2 = zmienna.slice(4)
console.log(zmienna_2); //wypisze się ma kota

var zmienna_2 = zmienna.slice(-3)
console.log('Ala już nie ma ' + zmienna_2 + ', bo kocur jej zwiał...'); //wypisze się Ala już nie ma kota, bo kocur jej zwiał...    

No cóż. Tak czasami też bywa...

Więcej przykładów zastosowania tej metody możesz zobaczyć tutaj: slice().

Metoda ta bardzo dobrze nadaje się do usuwania pierwszych i ostatnich elementów z naszego tekstu. Na przykład aby usunąć pierwszą literę zastosujemy instrukcję:


var zmienna = "Ala ma kota";
document.write( zmienna.slice(1) )

Aby usunąć ostatnią literę skorzystajmy z instrukcji:


document.write( zmienna.slice(0, zmienna.length-1) ) 

Dzielenie tekstu na części za pomocą metody split()

Metoda split(znak, długość) dzieli tekst na części. Miejsce podziału jest podawane w parametrze znak, a maksymalna ilość zwracanych elementów w parametrze długość (IE pomija ten parametr):


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

for (x=0; x<pieces.length; x++) {
    console.log(pieces[x]); //wypisze kolejne części zdania
}

Zamiana tekstu za pomocą metody replace()

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


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

console.log(textChanged);

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


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

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