Zrozumieć Tekst

Kiedy wpisujemy tekst w JavaScript – czy to literki, cyfry, czy inne znaki – każdy z nich jest zamieniany na specjalny kod, który komputer potrafi „zrozumieć” i przechować. Ten proces nazywamy kodowaniem, a w JavaScript używa się do tego UTF-16.

Pomyśl o UTF-16 jak o tłumaczu między Tobą a komputerem. Ty wpisujesz tekst, a UTF-16 zamienia go na kod, który komputer może przechowywać w swojej pamięci. W przypadku JavaScriptu i środowiska przeglądarki, ta pamięć znajduje się w przeglądarce internetowej.

Tworzenie i Manipulowanie Stringami

Stringi można tworzyć, umieszczając tekst między cudzysłowami. W JavaScript można używać pojedynczego cudzysłowia ('Hello'), podwójnego cudzysłowia ("Hello") lub backticksów (`Hello`).

const singleQuoted = 'Hello world!';
const doubleQuoted = "Hello world!";
const backticks = `Hello world!`;

Czym się różnią te cudzysłowy?

Pojedyncze i podwójne cudzysłowy działają bardzo podobnie – różnica jest głównie w tym, jak umieszczamy w nich tekst. Na przykład, jeśli chcesz użyć podwójnego cudzysłowu w stringu otoczonym podwójnymi cudzysłowami, musisz użyć znaków ucieczki, aby uniknąć błędu.

Przykłady poprawnego użycia:

const singleQuoted = 'Hello "world"!';
const doubleQuoted = "Hello 'world'!";

Przykłady błędów:

const doubleQuotedError = "Hello "world!"; // błąd
const singleQuotedError = 'Hello 'world!'; // błąd

Jeśli chodzi o styl, to zależy to od preferencji – niektórzy programiści używają zawsze pojedynczych cudzysłowów, inni podwójnych. Ważne jest, aby być konsekwentnym.

Ważne też tutaj wspomnieć o znakach ucieczki.

Backticks i szablony literałów

Wprowadzone w ES6, szablony literałów to jedna z fajniejszych nowości w JavaScript. Dzięki nim praca ze stringami stała się znacznie łatwiejsza i bardziej intuicyjna. Używa się ich z backticksami (`), co pozwala na robienie rzeczy, które wcześniej były bardziej skomplikowane.

Interpolacja wyrażeń: Możemy wstawiać zmienne bezpośrednio w stringach. Zamiast łączyć stringi i zmienne za pomocą +, możemy po prostu umieścić zmienną w stringu, otaczając ją ${}. Na przykład:

let name = "Łukasz";
console.log(`Cześć, ${name}!`); // Wynik: "Cześć, Łukasz!"

Wieloliniowe stringi: Tworzenie stringów zajmujących więcej niż jedną linię jest teraz znacznie prostsze. Wcześniej wymagało to używania znaków \n lub konkatenacji. Teraz możemy po prostu pisać tekst w wielu liniach bezpośrednio w backticksach:

let multilineString = `To jest string,
który zajmuje
kilka linii.`;
console.log(multilineString);

Niemutowalność

W JavaScript stringi mają pewną unikalną właściwość – są niemutowalne. Oznacza to, że nie możemy zmienić poszczególnych znaków w stringu bezpośrednio. Kiedy próbujemy coś zmienić, tak naprawdę tworzymy nowy string.

let text = "JavaScript";
let lowerText = text.toLowerCase();
console.log(text); // Wynik: "JavaScript"
console.log(lowerText); // Wynik: "javascript"

let greeting = "Hello";
greeting[0] = 'J';
console.log(greeting); // Wynik: "Hello"

Stringi a tablice

Ciekawostką w JavaScript jest to, że stringi w pewien sposób przypominają tablice. Możemy „zaglądać” do poszczególnych znaków stringu używając notacji tablicowej. Każdy znak w stringu ma swój indeks, zaczynając od 0.

Przykład:

let text = "Hello";
console.log(text[0]); // Wynik: "H"
console.log(text[1]); // Wynik: "e"

możemy także prze iterować string-a jak tablice:

let text = "Hello";
for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}

Operacje na stringach

Możemy dokonywać konkatenacji czyli łączyć stringi używając operatora +

let textHello = "Hello";
let textWorld = "world!";
console.log(textHello + " " + textWorld); //Wynik "Hello world!"

Możemy tez używać operatorów większości i mniejszości (<, <=, >, =>), gdzie przy stringach wydaje się dość dziwną operacją. Operatory te służą do sprawdzania, który string „znajduje się wcześniej” lub „później” w alfabecie, a także czy są one sobie równe, np:

console.log('apple' < 'banana'); // Wynik true
console.log('apple' <= 'apple');// Wynik true

Popularne metody string-ów

Api JavaScript udostępnia szereg metod które możemy wykonać na stronach, najpopularniejsze:

length()

Zwraca długość stringu

let email = "user@example.com";
console.log(email.length); // Wynik: 16

toUpperCase() i toLowerCase()

Zmienia wszystkie znaki w stringu na wielkie (toUpperCase()) lub małe litery(toLowerCase())

let username = "User123";
console.log(username.toLowerCase()); // Wynik: "user123"
console.log(username.toUpperCase()); // Wynik: "USER123"

includes()

Sprawdza, czy string zawiera określony podciąg.

let comment = "To jest przykładowy komentarz";
console.log(comment.includes("zakazane")); // Wynik: false

startsWith() i endsWith()

Sprawdza, czy string zaczyna się (startsWith()) lub kończy (endsWith()) na określony podciąg.

let url = "https://www.example.com";
console.log(url.startsWith("https://")); // Wynik: true
console.log(url.endsWith(".com"));       // Wynik: true

substring(startIndex, endIndex), substr(startIndex, length) i slice(startIndex, length)

Zwraca podciąg stringu. Różnią się głównie sposobem określania indeksów i długości.

let date = "2024-01-29";
let year = date.substr(0, 4);
console.log(year); // Wynik: "2024"

let email = "username@example.com";
let username = email.substring(0, email.indexOf("@"));
console.log(username); // Wynik: "username"

let fullName = "Jan Kowalski";
let lastName = fullName.slice(fullName.indexOf(" ") + 1);
console.log(lastName); // Wynik: "Kowalski"

replace()

Zamienia fragment stringu innym stringiem.

let message = "Witaj, [imie]!";
console.log(message.replace("[imie]", "Anna")); // Wynik: "Witaj, Anna!"

trim()

Usuwa białe znaki z początku i końca string-a.

let input = "   użytkownik123   ";
console.log(input.trim()); // Wynik: "użytkownik123"

split()

Dzieli string na tablicę stringów na podstawie określonego separatora.

let tags = "JavaScript, HTML, CSS";
console.log(tags.split(", ")); // Wynik: ["JavaScript", "HTML", "CSS"]

charAt()

Zwraca znak na określonym indeksie.

console.log("Hello".charAt(1)); // Wynik: "e"

indexOf() i lastIndexOf()

Zwraca indeks pierwszego (indexOf()) lub ostatniego (lastIndexOf()) wystąpienia podciągu w stringu.

console.log("Hello world".indexOf("o")); // Wynik: 4
console.log("Hello world".lastIndexOf("o")); // Wynik: 7

Lista wszystkich dostępnych metod możemy zobaczyć na https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String