const text = "Ala ma kota, a kot ma Ale."; //podwójne cudzysłowy
//lub
const text = 'Ala ma kota'; //pojedyncze apostrofy
//dzięki temu że zacząłem string od pojedynczych apostrofów
//bez problemu pisałem w środku cudzysłowy
const img = '';
//no to w drugą stronę
const txt = "It's a big year";
//ale w sumie nie ma to aż takiego znaczenia, bo zawsze możemy użyć znaku ucieczki
const img = "<div class=\"element\" data-text=\"test\">";
const txt = 'It\'s a big year';
Od 2015 roku stringi możemy też tworzyć za pomocą tak zwanych template string używając przy tym backticków:
const text = `Ala ma kota`;
Ich główną przewagą jest to, że unikamy tutaj problemów
z cudzysłowami i apostrofami wewnątrz tekstu (ale już pisząc w ich wnętrzu backticki musimy stosowac znak ucieczki),
ale przede wszystkim bez problemu możemy tutaj pisać wielo liniowe teksty,
oraz o wiele łatwiej możemy wstawiać do tekstu zmienne, które wstawiamy stosując zapis: ${zmienna}
Teksty na wiele linii
Domyślnie klasyczne stringi tworzone za pomocą apostrofów lub cudzysłowów mogą być pisane tylko w jednej linii.
Tworząc wieloliniowe teksty możemy zastosować kilka technik.
//poprzez operator przypisania
let text = "Stoi na stacji lokomotywa,";
text += "Ciężka, ogromna i pot z niej spływa:";
text += "Tłusta oliwa.";
//poprzez dodawanie części tekstu
let text = "Stoi na stacji lokomotywa,"
+ "Ciężka, ogromna i pot z niej spływa:"
+ "Tłusta oliwa."
//Poprzez zastosowanie znaku backslash na końcu linii
let text = "Stoi na stacji lokomotywa,\
Ciężka, ogromna i pot z niej spływa:\
Tłusta oliwa.\
"
//Najlepsza metoda - użycie template strings
let text = `Stoi na stacji lokomotywa,
Ciężka, ogromna i pot z niej spływa:
Tłusta oliwa.
`
Wstawianie zmiennych do tekstu
Do wnętrza tekstu zmienne możemy wstawić na kilka sposobów.
Dwa najpopularniejsze to dodawanie do stringa zmiennej oraz w przypadku template strings użycie tak zwanej interpolacji:
const age = 10;
const text = "Ten pies ma " + age + " lat";
const text = 'Ten kot ma ' + age + ' lat';
const text = `Ten chomik ma ${age} lat`;
const a = 112;
const b = 120;
const text = "Cena produktu A to " + a + "zł, cena produktu B to " + b + "zł, a suma to " + (a+b)+ "zł";
const text = `Cena produktu A to ${a}zł, cena produktu B to ${b}zł, a suma to ${a+b}zł`;
Template strings wydaje się fantastyczną sprawą.
Pamiętaj tylko, że przy pisaniu takiego kodu trzeba mieć na uwadze to, że nie wszystkie przeglądarki obsługują
tą składnię i w razie potrzeby przydało by się konwertować taki kod na starszy zapis.
Pobieranie długości tekstu
Aby odczytać długość naszego tekstu posłużymy się właściwością length.
const text = "Ala";
text.length; //3
"Koty i psy są fajne".length //19
Przy pracy z normalnymi tekstami, właściwość length zwróci wynik jak należy.
Pobieranie znaku na danej pozycji
Do pobrania w tekście znaku na danej pozycji możemy zastosować dwa 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";
document.write(text.charAt(0)); //A
document.write(text.charAt(4)); //m
document.write(text[0]); //A
document.write(text[4]); //m
document.write(text.charAt(text.length-1)); //e
document.write(text[text.length-1]); //e
Typy proste (w tym String) nie są mutowalne, stąd nie możemy w nich bezpośrednio podmieniać liter jak pokazano poniżej:
const txt = "Ala ma kota";
txt[0] = "E";
document.write(txt); //"Ala ma kota"
Żeby móc podmienić literę w tekście, musimy wykorzystać dowolny sposób, który zwróci nam nowy tekst.
Może to być zastosowanie replace(), substr().
toUpperCase() i toLowerCase() - zamiana wielkości liter
Metody toUpperCase() i toLowerCase() służą odpowiednio do zamieniania tekstu na duże i małe litery.
const text = "Ala ma kota";
document.write(text.toUpperCase()); //"ALA MA KOTA"
document.write(text.toLowerCase()); //"ala ma kota"
indexOf() i lastIndexOf() - zwracanie pozycji szukanego tekstu
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) {
document.write("Ala ma psa" );
} else {
document.write("Ala ma kota" );
}
if (~text.indexOf("psa")) {
document.write("Ala ma psa" );
} else {
document.write("Ala ma kota" );
}
Zastosowany w drugim przykładzie znak tyldy to operator bitowy. Wykonuje on działanie -(x + 1).
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 a występuje na pozycji 15
const url = "http://nazwastrony.pl/przykladowaNazwaPliku.php";
//korzystając z metod opisanych poniżej tniemy url na części
document.write( url.slice(url.lastIndexOf(".") + 1) ); //"php"
document.write( url.slice(url.lastIndexOf("/") + 1, url.lastIndexOf(".")) ); //"przykladowaNazwaPliku"
//można też ciut inaczej
const file = url.slice(url.lastIndexOf("/") + 1); //"przykladowaNazwaPliku.php"
const part = file.split("."); //dzielimy nazwę na części (otrzymujemy tablicę)
document.write( part[1] ); //"php"
document.write( part[0] ); //"przykladowaNazwaPliku"
W nowym Javascript istnieje też metoda includes(str), która także służy do wyszukiwania fragmentów tekstu.
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")) {
document.write("Ala ma psa" );
} else {
document.write("Ala ma kota" );
}
startsWith() i endsWith() - czy zaczyna się i kończy od
W ES6 (ECMAScript 2015) wprowadzono dwie dodatkowe funkcje - startsWith() i endsWith(),
które jak sama nazwa wskazuje zwracają prawdę lub fałsz jeżeli tekst zaczyna się lub kończy od szukanej frazy:
const text = "Ala ma kota";
text.startsWith("Ala"); //true
text.startsWith("Ola"); //false
text.endsWith("kota"); //true
text.endsWith("psa"); //false
substr() - zwracanie kawałka tekstu
Metoda substr(start, lng) służy do zwracania 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";
document.write(text.substr(2)); //"a ma kota"
document.write(text.substr(0, 3)); //"Ala"
document.write(text.substr(7, 4)); //"kota"
document.write(text.substr(4, text.length - 4)); //wypisze tekst od 4 litery do końca - "ma kota"
Tu też można zastosować ciekawą sztuczkę:
const txt = "Marcin ma kota i psa";
//chcę wyciąć napis "ma kota i psa";
const restText = txt.substr("Marcin".length);
document.write(restText); //" ma kota i psa";
substring() - zwracanie kawałka tekstu
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";
document.write(text.substring(0, 3)); //"Ala"
document.write(text.substring(3)); //"ma kota"
document.write("Ala ma kota".substring(6, 4)); //"ma"
slice() - zwracanie kawałka tekstu
Tekst jest uporządkowanym ciągiem znaków.
Tak samo jak w przypadku tablic, tak i w przypadku zmiennych tekstowych możemy skorzystać z metody slice(start, stop),
która zwraca nam kawałek tekstu.
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);
document.write(txt2); //"Ala"
const txt3 = txt.slice(1,5);
document.write(txt3); //"la m"
const txt4 = txt.slice(4,6);
document.write(txt4); //"ma"
const txt5 = txt.slice(4);
document.write(txt5); //"ma kota"
const txt6 = txt.slice(-4);
document.write("Ala już nie ma " + txt6 + ", bo kocur jej zwiał..."); //Ala już nie ma kota, bo kocur jej zwiał...
split() - dzielenie tekstu
Metoda split(znak, długość) zwraca tablicę, która składa się z podzielonych fragmentów tekstu.
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 parts = text.split(", ");
parts.forEach(function(letter) {
document.write(letter.toUpperCase());
});
replace() - wyszukiwanie tekstu i jego zamiana
Metoda replace(ciag_szukany, zamieniony) zwraca nowy tekst, w którym został zamieniony szukany ciąg znaków na nowy tekst.
const text = "Ala ma kota"
const textNew = text.replace("kota", "psa");
document.write(textNew); //"Ala ma psa"
Domyślnie metoda replace() wyszukuje i zamienia tylko pierwsze wystąpienie szukanego ciągu:
const text = "Ola lubi koty, Ola lubi psy";
const textNew = text.replace("Ola", "Ela");
document.write(textNew); //"Ela lubi koty, Ola lubi psy"
Aby zostały zamienione wszystkie wystąpienia szukanego ciągu, musimy zastosować wyrażenie regularne.
const text = "Ola lubi koty, Ola lubi psy";
const textNew = text.replace(/Ola/g, "Ela"); //g jak global
document.write(textNew); //"Ela lubi koty, Ela lubi psy"
repeat() - powtarzanie tekstu
Aby powtórzyć tekst możemy posłużyć się funkcją repeat(count).
Parametr count określa liczbę powtórzeń tekstu - od 0 do +nieskończoności:
const text = "kot";
document.write(text.repeat(3)); //kotkotkot
"-".repeat(10); //----------
Podobny efekt możemy też uzyskać za pomocą klasycznych pętli:
let str = "";
for (let i=1; i<=3; i++) {
str += "kot";
}
document.write(str); //kotkotkot
Pętla po tekście
Teksty i tablice w Javascript mają dużo wspólnych cech.
Podobnie pobieramy tutaj długośc danych elementów (length),
podobnie odwołujemy się do danych składowych (przez indeks),
a i wiele metod jest identyczna (slice(), indexOf(), includes() itp).
Podobną cechą wspólną jest to, że podobnie jak w przypadku tablic po tekstach także możemy iterować:
const txt = "abecadło";
for (let i=0; i<txt.length; i++) {
document.write(txt[i]);
}
for (const el of txt) {
document.write(el);
}
Dodatkową możliwością iteracji jest zamiana tekstu na tablicę i wykorzystanie jednej z metod tablicowych:
const txt = "abecadło";
[...txt].forEach(function(el) {
document.write(el);
});
txt.split("").forEach(function(el) {
document.write(el);
});