JavaScript · Синтаксис · Початковий рівень

Методи рядків

10 завдань

Вивчи вбудовані методи рядків у JavaScript — пошук, нарізка, заміна, розбиття та форматування тексту за допомогою шаблонних рядків.

Короткий вступ до теми та пояснення перед вправами (вправи нижче):

Методи рядків: пошук, перетворення, розбиття

#
Рядки — один з найпоширеніших типів у JavaScript, і вони мають великий набір вбудованих методів. Знання цих методів замінює багато ручних циклів. `length` — це властивість, не метод, тому дужки не потрібні: ```javascript let name = "JavaScript"; console.log(name.length); // 10 ``` Зміна регістру: `toUpperCase()` і `toLowerCase()` повертають новий рядок, не змінюючи оригінал. Рядки в JavaScript незмінні — кожен метод повертає нове значення, не змінює рядок на місці. Видалення пробілів: `trim()` прибирає пробіли, табуляцію та переноси рядків з обох кінців. `trimStart()` і `trimEnd()` обробляють лише один бік. Це важливо при обробці введення користувача, яке часто приходить з випадковими пробілами. Пошук усередині рядка: - `includes(sub)` — повертає true, якщо підрядок є де-небудь - `startsWith(sub)` і `endsWith(sub)` — перевіряють лише початок або кінець - `indexOf(sub)` — повертає позицію (від нуля) або -1, якщо не знайдено - `lastIndexOf(sub)` — те саме, але сканує справа наліво Зміна вмісту: - `replace(old, new)` — замінює лише перший збіг - `replaceAll(old, new)` — замінює кожен збіг - `split(separator)` — перетворює рядок на масив частин Дві поширені помилки: `replace()` торкається лише першого входження. Для всіх — `replaceAll()` або regex з прапором `g`: `replace(/word/g, 'replacement')`. `indexOf()` повертає -1 коли нічого не знайдено — не null і не false. Завжди порівнюй явно: `if (idx !== -1)`, а не просто `if (idx)`. Результат 0 (підрядок на позиції 0) є falsy і буде хибно розцінений як "не знайдено". Жоден з цих методів не змінює оригінальний рядок. Результат потрібно зберігати: `let clean = text.trim()`, а не просто `text.trim()`.

slice, padStart, шаблонні рядки та ланцюжки методів

#
Ці чотири паттерни постійно зустрічаються в реальному коді і покривають більшість задач з обробки рядків. **Витягування частин через `slice`** ```javascript let filename = "report_2024.pdf"; let ext = filename.slice(filename.lastIndexOf(".")); // ".pdf" let name = filename.slice(0, filename.lastIndexOf(".")); // "report_2024" ``` `slice(start, end)` використовує індекси від нуля і не включає кінцеву позицію. Від'ємні значення рахуються з кінця: `slice(-3)` бере останні 3 символи. Комбінація `slice` з `lastIndexOf` — стандартний паттерн для розбиття імен файлів або URL за відомим роздільником. **Доповнення для виводу фіксованої ширини** ```javascript let orderNum = 42; console.log(String(orderNum).padStart(6, "0")); // "000042" let label = "ok"; console.log(label.padEnd(10, ".")); // "ok........" ``` `padStart(targetLength, padChar)` заповнює ліву сторону; `padEnd` — праву. Число потрібно спочатку конвертувати в рядок — `padStart` працює лише з рядками. Корисно для номерів замовлень, часових міток та вирівнювання табличного виводу. **Шаблонні рядки** ```javascript let user = "Alice"; let score = 98; console.log(`${user} scored ${score} points`); console.log(`Grade: ${score >= 90 ? "A" : "B"}`); ``` Шаблонні рядки використовують зворотні лапки, а не звичайні. Все всередині `${}` обчислюється як вираз JavaScript — можна викликати функції, використовувати тернарні оператори, робити арифметику. Використовуй їх коли потрібно вставити змінну в рядок; конкатенація через `+` швидко стає незручною. **Ланцюжки методів** ```javascript let raw = " Hello, World! "; let result = raw.trim().toLowerCase().replaceAll(",", ""); // "hello world!" ``` Кожен метод рядка повертає новий рядок, тому виклики можна об'єднати в один рядок. Читай зліва направо: спочатку trim, потім нижній регістр, потім видалення розділових знаків. Ланцюжок доречний коли кожен крок зрозумілий — якщо логіка заплутується, краще розбити на окремі змінні.

Довідник методів рядків

#
Швидкий довідник методів рядків JavaScript. Всі повертають новий рядок, якщо не зазначено інше. **Перевірка** `str.length` — кількість символів (властивість, без дужок) `str.includes(sub)` — true якщо sub є де-небудь `str.startsWith(sub)` — true якщо str починається з sub `str.endsWith(sub)` — true якщо str закінчується на sub `str.indexOf(sub)` — перша позиція sub, або -1 `str.lastIndexOf(sub)` — остання позиція sub, або -1 **Перетворення** `str.toUpperCase()` — весь верхній регістр `str.toLowerCase()` — весь нижній регістр `str.trim()` — видалити пробіли з обох кінців `str.trimStart()` — видалити лише зліва `str.trimEnd()` — видалити лише справа `str.replace(old, new)` — замінити перший збіг `str.replaceAll(old, new)` — замінити всі збіги `str.padStart(len, char)` — доповнити зліва до довжини len `str.padEnd(len, char)` — доповнити справа до довжини len `str.repeat(n)` — повторити рядок n разів **Витягування** `str.slice(start, end)` — підрядок за індексом; end не включається; від'ємні — з кінця `str.split(sep)` — розбити на масив за роздільником; `split('')` — на окремі символи **Шаблонні рядки** `` `Hello, ${name}!` `` — вставити будь-який вираз через ${} `` `${a > b ? a : b}` `` — тернарні оператори, виклики функцій, арифметика — все працює в ${}

Вправи:

01

Trim та верхній регістр

#

Змінна `text` зберігає рядок з пробілами на початку та в кінці. Видали пробіли та перетвори результат у верхній регістр.

let text = "  hello javascript  ";
// твій код тут
Рішення 
let text = "  hello javascript  ";
console.log(text.trim().toUpperCase());
02

Швидка перевірка email

#

Перевір, чи містить рядок `email` символ `"@"` і чи закінчується на `".com"`. Видруй `true` або `false`.

let email = "[email protected]";
// твій код тут
Рішення 
let email = "[email protected]";
console.log(email.includes("@") && email.endsWith(".com"));
03

Розбити на слова

#

Розбий рядок `sentence` на масив окремих слів та виведи масив. Слова розділені пробілами.

let sentence = "JavaScript has many string methods";
// твій код тут
Рішення 
let sentence = "JavaScript has many string methods";
console.log(sentence.split(" "));
04

Замінити всі входження

#

У рядку `text` заміни кожне входження слова `"cat"` на `"dog"` та виведи результат.

let text = "The cat sat on the mat. The cat liked it.";
// твій код тут
Рішення 
let text = "The cat sat on the mat. The cat liked it.";
console.log(text.replaceAll("cat", "dog"));
05

Знайти позицію підрядка

#

Знайди позицію першого входження `"script"` (без урахування регістру) у `text`. Якщо не знайдено — виведи `"Not found"`, інакше — індекс.

let text = "JavaScript is a scripting language";
// твій код тут
Рішення 
let text = "JavaScript is a scripting language";
let idx = text.toLowerCase().indexOf("script");
if (idx !== -1) {
    console.log(idx);
} else {
    console.log("Not found");
}
06

Доповнити номер замовлення

#

Відформатуй число `orderNum` як рядок рівно з 6 символів, доповнений нулями зліва. Наприклад: `42` → `"000042"`.

let orderNum = 42;
// твій код тут
Рішення 
let orderNum = 42;
console.log(String(orderNum).padStart(6, "0"));
07

Перевірити URL

#

Перевір, чи починається URL у `url` з `"https"` і чи містить `"."`. Виведи `true` або `false`.

let url = "https://example.com";
// твій код тут
Рішення 
let url = "https://example.com";
console.log(url.startsWith("https") && url.includes("."));
08

Ім'я файлу без розширення

#

Змінна `path` зберігає шлях до файлу. Витягни лише ім'я файлу без розширення (частина після останнього `"/"` і до останнього `"."`).

let path = "files/reports/summary_2024.pdf";
// твій код тут
Рішення 
let path = "files/reports/summary_2024.pdf";
let filename = path.slice(path.lastIndexOf("/") + 1);
let name = filename.slice(0, filename.lastIndexOf("."));
console.log(name);
09

snake_case у Title Case

#

Перетвори рядок зі `snake_case` у Title Case: кожне слово з великої літери, слова розділені пробілами. Приклад: `"hello_world"` → `"Hello World"`.

let text = "hello_world_from_js";
// твій код тут
Рішення 
let text = "hello_world_from_js";
let result = text
    .split("_")
    .map(word => word[0].toUpperCase() + word.slice(1))
    .join(" ");
console.log(result);
10

Нормалізація введення користувача

#

Змінна `input` зберігає сирий ввід з зайвими пробілами, змішаним регістром і дефісами замість пробілів. Нормалізуй його: видали пробіли по краях, переведи у нижній регістр, заміни всі дефіси на пробіли.

let input = "  Hello-World-JavaScript  ";
// твій код тут
Рішення 
let input = "  Hello-World-JavaScript  ";
console.log(input.trim().toLowerCase().replaceAll("-", " "));