JavaRush /Курси /Frontend SELF UA /Рядки та методи роботи з ними

Рядки та методи роботи з ними

Frontend SELF UA
Рівень 33 , Лекція 3
Відкрита

4.1 Вступ до рядків

Рядки в JavaScript представляють собою послідовності символів і є одним з основних типів даних. Рядки можна створювати за допомогою одинарних лапок ('текст '), подвійних лапок ("текст"), або зворотних лапок (`текст`).

Приклади рядків:

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

В об'єкта рядка можна викликати такі методи:

Метод Опис
length Повертає довжину рядка
charAt(index) Повертає символ, що знаходиться на вказаній позиції
toUpperCase() Перетворює рядок у верхній регістр
toLowerCase() Перетворює рядок у нижній регістр
indexOf(substring) Повертає індекс першого входження підрядка або -1, якщо не знайдено
includes(substring) Перевіряє, чи містить рядок вказаний підрядок, повертає true або false
slice(start, end) Витягує частину рядка і повертає новий рядок
replace(searchValue, newValue) Замінює вказаний підрядок на новий підрядок
split(separator) Розбиває рядок на масив підрядків, використовуючи вказаний розділювач
trim() Видаляє пробіли з початку та кінця рядка

4.2 Основні методи роботи з рядками

Приклади використання методів

1. Властивість length

Повертає довжину рядка:

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

2. Метод charAt(index)

Повертає символ, що знаходиться на вказаній позиції:

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

3. Метод toUpperCase() та toLowerCase():

Перетворюють рядок у верхній або нижній регістр:

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

4. Метод indexOf(substring)

Повертає індекс першого входження підрядка або -1, якщо підрядок не знайдено:

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

5. Метод includes(substring)

Перевіряє, чи містить рядок вказаний підрядок, повертає true або false:

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

6. Метод trim()

Видаляє пробіли з початку та кінця рядка:

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

7. Метод replace(searchValue, newValue)

Замінює вказаний підрядок на новий підрядок:

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

8. Метод split(separator)

Розбиває рядок на масив підрядків, використовуючи вказаний розділювач:

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

9. Метод substring(start, end)

Повертає підрядок між двома індексами:

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

10. Метод substr(start, length)

Повертає підрядок, починаючи з вказаного індексу і довжиною, рівною вказаній кількості символів:

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

11. Метод slice(start, end)

Витягує частину рядка і повертає новий рядок:

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

12. Метод startsWith(substring)

Перевіряє, чи починається рядок з вказаного підрядка, повертає true або false:

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

13. Метод endsWith(substring)

Перевіряє, чи закінчується рядок вказаним підрядком, повертає true або false:

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

14. Метод repeat(count)

Повертає новий рядок, який містить вказану кількість копій початкового рядка:

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

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

4.3 Рядок нового покоління

Шаблонні рядки (template strings) додали в JavaScript недавно. Вони надають більш зручний і читабельний спосіб роботи з текстом у порівнянні зі звичайними рядками. Записуються в зворотних лапках (`) і підтримують інтерполяцію виразів і багаторядковий текст.

Синтаксис:

    
      `рядок нового покоління`
    
  

Приклад:

Шаблонний літерал greeting створюється з використанням зворотних лапок.

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

Основні особливості шаблонних рядків:

  • Інтерполяція виразів: шаблонні рядки дозволяють вставляти вирази та змінні всередину рядка за допомогою ${}
  • Багаторядковий текст: шаблонні рядки підтримують багаторядковий текст без необхідності використовувати спеціальні символи для переносу рядків
  • Вбудовані вирази: всередині шаблонних рядків можна використовувати будь-які вирази JavaScript, включаючи функції

Розглянемо приклади використання шаблонних рядків.

Інтерполяція виразів

Шаблонні рядки дозволяють легко вставляти значення змінних і результати виразів всередину рядка:

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

У цьому прикладі змінні name і age вставляються всередину рядка з використанням ${}.

Багаторядковий текст

Шаблонні рядки спрощують створення багаторядкових рядків без необхідності використання символів переносу рядка (\n):

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

      console.log(multiLine);
    
  

Вбудовані вирази

Всередині шаблонних рядків можна використовувати будь-які вирази JavaScript, включаючи виклики функцій:

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!"
    
  

Краще, звісно, функції не викликати всередині рядків, але якщо дуже хочеться, то можна.

Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ