CodeGym/Kursy/Frontend SELF PL/Łańcuchy znaków i metody ich obsługi

Łańcuchy znaków i metody ich obsługi

Dostępny

4.1 Wprowadzenie do łańcuchów znaków

Łańcuchy znaków w JavaScript to sekwencje znaków i są jednym z podstawowych typów danych. Łańcuchy można tworzyć używając pojedynczych cudzysłowów ('tekst'), podwójnych cudzysłowów ("tekst"), lub odwrotnych apostrofów (`tekst`).

Przykłady łańcuchów znaków:

JavaScript
let singleQuote = 'Hello, World!';
let doubleQuote = "Hello, World!";
let backticks = `Hello, World!`;

Można wywoływać takie metody na obiekcie łańcucha znaków:

Metoda Opis
length Zwraca długość łańcucha znaków
charAt(index) Zwraca znak znajdujący się na określonej pozycji
toUpperCase() Przekształca łańcuch w wielkie litery
toLowerCase() Przekształca łańcuch w małe litery
indexOf(substring) Zwraca indeks pierwszego wystąpienia podłańcucha lub -1, jeśli nie znaleziono
includes(substring) Sprawdza, czy łańcuch zawiera określony podłańcuch, zwraca true lub false
slice(start, end) Wydobywa część łańcucha i zwraca nowy łańcuch
replace(searchValue, newValue) Zastępuje określony podłańcuch nowym podłańcuchem
split(separator) Dzieli łańcuch na tablicę podłańcuchów, używając określonego separatora
trim() Usuwa spacje z początku i końca łańcucha

4.2 Podstawowe metody pracy z łańcuchami znaków

Przykłady użycia metod

1. Właściwość length

Zwraca długość łańcucha znaków:

JavaScript
let str = 'Hello';
console.log(str.length); // 5

2. Metoda charAt(index)

Zwraca znak znajdujący się na określonej pozycji:

JavaScript
let str = 'Hello';
let result = str.charAt(1);
console.log(result); // 'e'

3. Metoda toUpperCase() i toLowerCase()

Przekształcają łańcuch w wielkie lub małe litery:

JavaScript
let str = 'Hello';
console.log(str.toUpperCase()); // 'HELLO'
console.log(str.toLowerCase()); // 'hello'

4. Metoda indexOf(substring)

Zwraca indeks pierwszego wystąpienia podłańcucha lub -1, jeśli podłańcuch nie znaleziony:

JavaScript
let str = 'Hello, world!';
let result = str.indexOf('world');
console.log(result); // 7

5. Metoda includes(substring)

Sprawdza, czy łańcuch zawiera określony podłańcuch, zwraca true lub false:

JavaScript
let str = 'Hello, world!';
let result = str.includes('world');
console.log(result); // true

6. Metoda trim()

Usuwa spacje z początku i końca łańcucha:

JavaScript
let str = '   Hello, world!   ';
console.log(str.trim()); // 'Hello, world!'

7. Metoda replace(searchValue, newValue)

Zastępuje określony podłańcuch nowym podłańcuchem:

JavaScript
let str = 'Hello, world!';
console.log(str.replace('world', 'JavaScript')); // 'Hello, JavaScript!'

8. Metoda split(separator)

Dzieli łańcuch na tablicę podłańcuchów, używając określonego separatora:

JavaScript
let str = 'Hello, world!';
let words = str.split(' ');
console.log(words); // ['Hello,', 'world!']

9. Metoda substring(start, end)

Zwraca podłańcuch między dwoma indeksami:

JavaScript
let str = 'Hello, world!';
console.log(str.substring(0, 5)); // 'Hello'

10. Metoda substr(start, length)

Zwraca podłańcuch, zaczynając od określonego indeksu i długości równej określonej liczbie znaków:

JavaScript
let str = 'Hello, world!';
console.log(str.substr(0, 5)); // 'Hello'

11. Metoda slice(start, end)

Wydobywa część łańcucha i zwraca nowy łańcuch:

JavaScript
let str = 'Hello, world!';
console.log(str.slice(0, 5)); // 'Hello'

12. Metoda startsWith(substring)

Sprawdza, czy łańcuch zaczyna się od określonego podłańcucha, zwraca true lub false:

JavaScript
let str = 'Hello, world!';
console.log(str.startsWith('Hello')); // true

13. Metoda endsWith(substring)

Sprawdza, czy łańcuch kończy się określonym podłańcuchem, zwraca true lub false:

JavaScript
let str = 'Hello, world!';
console.log(str.endsWith('world!')); // true

14. Metoda repeat(count)

Zwraca nowy łańcuch, zawierający określoną liczbę kopii oryginalnego łańcucha:

JavaScript
let str = 'Hello';
console.log(str.repeat(3)); // 'HelloHelloHello'

let str2 = '-';
console.log(str2.repeat(30)); // '---------------------------------------------------------------'

4.3 Łańcuchy nowej generacji

Template strings wprowadzono do JavaScript stosunkowo niedawno. Oferują one wygodniejszy i bardziej czytelny sposób pracy z tekstem w porównaniu do tradycyjnych łańcuchów. Są zawierane w odwrotnych apostrofach (`) i wspierają interpolację wyrażeń oraz tekst wieloliniowy.

Składnia:

`łańcuch nowej generacji`

Przykład:

Template literatu greeting jest tworzony przy użyciu odwrotnych apostrofów.

JavaScript
const greeting = `Hello, World!`;
console.log(greeting); // "Hello, World!"

Główne cechy template strings:

  • Interpolacja wyrażeń: template strings pozwalają na wstawianie wyrażeń i zmiennych wewnątrz łańcucha przy użyciu ${}
  • Tekst wieloliniowy: template strings wspierają tekst wieloliniowy bez konieczności używania specjalnych znaków do przenoszenia linii
  • Wbudowane wyrażenia: w środku template strings można używać dowolnych wyrażeń JavaScript, w tym funkcji

Przeanalizujmy przykłady użycia template strings.

Interpolacja wyrażeń

Template strings pozwalają łatwo wstawiać wartości zmiennych i wyniki wyrażeń wewnątrz łańcucha:

JavaScript
let name = "Alice";
let age = 30;
let greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting); // "Hello, Alice! You are 30 years old."

W tym przykładzie zmienne name i age są wstawiane wewnątrz łańcucha przy użyciu ${}.

Tekst wieloliniowy

Template strings upraszczają tworzenie łańcuchów wieloliniowych bez potrzeby używania znaków przenoszenia linii (\n):

JavaScript
let multiLine = `Lorem ipsum odor, consectetuer adipiscing elit.
Sit lorem mattis eget maximus.`;

console.log(multiLine);

Wbudowane wyrażenia

W środku template strings można używać dowolnych wyrażeń JavaScript, w tym wywołań funkcji:

JavaScript
let a = 5;
let b = 10;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // "The sum of 5 and 10 is 15."

function getGreeting(name) {
  return `Hello, ${name}!`;
}

let greeting = `${getGreeting("Bob")}`;
console.log(greeting); // "Hello, Bob!"

Lepiej nie wywoływać funkcji w środku łańcucha, ale jeśli bardzo chcesz, to możesz.

1
Zadanie
Frontend SELF PL,  poziom 33lekcja 3
Niedostępne
Rejestry linii
Rejestry linii
1
Zadanie
Frontend SELF PL,  poziom 33lekcja 3
Niedostępne
Zamiana podciągu
Zamiana podciągu
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy