Ciągi znaków w JavaScript
1. Wprowadzenie
Ciąg znaków (ang. string) to typ danych reprezentujący tekst w JavaScript.
Stringi są niemutowalne (immutable) – nie można zmieniać poszczególnych znaków w istniejącym stringu, ale można tworzyć nowe stringi na podstawie istniejących.
Stringi w JavaScript mogą być tworzone przy użyciu:
* Pojedynczych cudzysłowów: 'tekst'
* Podwójnych cudzysłowów: "tekst"
* Backticks (template literals): `tekst`
2. Tworzenie stringów
2.1 Pojedyncze i podwójne cudzysłowy
Nie ma różnicy między nimi – wybierz jeden styl i stosuj konsekwentnie.
2.2 Znaki specjalne (escape sequences)
Znaki specjalne:
| Znak | Opis |
|---|---|
\n |
Nowa linia |
\t |
Tabulator |
\\ |
Backslash |
\' |
Pojedynczy cudzysłów |
\" |
Podwójny cudzysłów |
2.3 Template literals (backticks) – ES6
Pozwalają na: * Interpolację zmiennych (wstawianie wartości do stringa) * Wieloliniowe stringi
Wieloliniowe stringi:
3. Właściwość length
Zwraca liczbę znaków w stringu.
4. Dostęp do znaków
4.1 Indeksowanie (od 0)
4.2 Metoda charAt()
Różnica:
* str[index] zwraca undefined dla nieistniejącego indeksu
* str.charAt(index) zwraca pusty string ""
5. Metody stringów
5.1 Zamiana wielkości liter
| Metoda | Opis | Przykład |
|---|---|---|
toUpperCase() |
Zamienia na wielkie litery | "hello".toUpperCase() → "HELLO" |
toLowerCase() |
Zamienia na małe litery | "HELLO".toLowerCase() → "hello" |
5.2 Szukanie w stringu
| Metoda | Opis | Zwraca |
|---|---|---|
indexOf() |
Indeks pierwszego wystąpienia podstringu | Indeks lub -1 |
lastIndexOf() |
Indeks ostatniego wystąpienia | Indeks lub -1 |
includes() |
Sprawdza, czy string zawiera podstring | true / false |
startsWith() |
Sprawdza, czy zaczyna się od podstringu | true / false |
endsWith() |
Sprawdza, czy kończy się na podstringu | true / false |
Przykłady:
5.3 Wycinanie fragmentów
| Metoda | Opis | Przykład |
|---|---|---|
slice() |
Wycina fragment (indeksy: start, end) | "Hello".slice(1, 4) → "ell" |
substring() |
Podobna do slice(), ale nie akceptuje ujemnych indeksów |
"Hello".substring(1, 4) → "ell" |
substr() |
Wycina fragment (start, length) – przestarzała | "Hello".substr(1, 3) → "ell" |
Przykłady:
5.4 Zamiana tekstu
| Metoda | Opis | Przykład |
|---|---|---|
replace() |
Zamienia pierwsze wystąpienie | "Hello".replace("l", "x") → "Hexlo" |
replaceAll() |
Zamienia wszystkie wystąpienia (ES2021) | "Hello".replaceAll("l", "x") → "Hexxo" |
Używanie wyrażeń regularnych:
5.5 Usuwanie białych znaków
| Metoda | Opis |
|---|---|
trim() |
Usuwa białe znaki z początku i końca |
trimStart() / trimLeft() |
Usuwa z początku |
trimEnd() / trimRight() |
Usuwa z końca |
5.6 Dzielenie i łączenie
| Metoda | Opis | Przykład |
|---|---|---|
split() |
Dzieli string na tablicę | "a,b,c".split(",") → ["a", "b", "c"] |
concat() |
Łączy stringi | "Hello".concat(" ", "World") → "Hello World" |
Łączenie z operatorem +:
5.7 Powtarzanie
| Metoda | Opis | Przykład |
|---|---|---|
repeat() |
Powtarza string n razy | "Ha".repeat(3) → "HaHaHa" |
5.8 Dopełnianie (padding)
| Metoda | Opis | Przykład |
|---|---|---|
padStart() |
Dopełnia od początku do określonej długości | "5".padStart(3, "0") → "005" |
padEnd() |
Dopełnia od końca | "5".padEnd(3, "0") → "500" |
6. Konwersja innych typów na string
6.1 Metoda String()
6.2 Metoda toString()
6.3 Template literals
7. Sprawdzanie typu
8. Stringi jako obiekty (unikaj)
Stringi mogą być tworzone jako obiekty, ale nie jest to zalecane:
9. Porównywanie stringów
Stringi są porównywane leksykograficznie (według kodów Unicode).
Porównywanie bez uwzględniania wielkości liter:
10. Iterowanie po znakach
Pętla for...of:
Pętla for:
11. Wyrażenia regularne (regex)
Stringi często używane są z wyrażeniami regularnymi do wyszukiwania i zamiany wzorców.
12. Dobre praktyki
- Używaj template literals zamiast konkatenacji dla czytelności
- Preferuj
===zamiast==przy porównywaniu stringów - Pamiętaj, że stringi są niemutowalne – metody tworzą nowe stringi
- Unikaj tworzenia stringów jako obiektów (
new String()) - Używaj
trim()do czyszczenia danych wejściowych użytkownika
13. Przykłady praktyczne
Walidacja e-maila:
Formatowanie numeru telefonu:
Capitalize first letter:
14. Podsumowanie
| Kategoria | Metody |
|---|---|
| Wielkość liter | toUpperCase(), toLowerCase() |
| Szukanie | indexOf(), includes(), startsWith() |
| Wycinanie | slice(), substring() |
| Zamiana | replace(), replaceAll() |
| Czyszczenie | trim(), trimStart(), trimEnd() |
| Dzielenie/łączenie | split(), concat(), operator + |
| Inne | repeat(), padStart(), padEnd() |
15. Wnioski
- Ciągi znaków są fundamentalnym typem danych w JavaScript
- JavaScript oferuje bogaty zestaw metod do manipulacji stringami
- Template literals to nowoczesny sposób tworzenia i formatowania stringów
- Stringi są niemutowalne – każda operacja tworzy nowy string
- Znajomość metod stringów jest kluczowa dla pracy z tekstem i danymi użytkownika
Podsumowanie praktyczne:
Opanuj metody stringów, używaj template literals dla czytelności, a wyrażenia regularne do zaawansowanej walidacji. To pozwoli Ci efektywnie pracować z tekstem w JavaScript.