Пошук уроків, статей та іншого контенту
Пошук, витягування, заміна та форматування тексту — найпотрібніший набір методів для роботи з рядками.
Текст — один із найпоширеніших видів даних у будь-якому застосунку: імена користувачів, повідомлення, URL-адреси, введені форми. Модуль «Об'єкти та масиви» дав масивам цілий арсенал методів (map, filter, reduce) — рядки мають свій власний набір методів, не менш важливий на практиці, хоча раніше в курсі ми лише читали значення рядків, не обробляючи їх.
Найважливіший нюанс перед усім іншим: жоден метод рядка не змінює сам рядок — усі вони повертають новий рядок. Це той самий принцип незмінності, що ми розглядали для масивів (модуль «Об'єкти та масиви»), лише рядки в JavaScript незмінні завжди, без потреби свідомо обирати «імутабельний» метод:
const name = "олена";
name.toUpperCase(); // "ОЛЕНА" — повертає новий рядок
console.log(name); // "олена" — оригінал не змінивсяconst email = "user@example.com";
email.includes("@"); // true
email.startsWith("user"); // true
email.endsWith(".com"); // true
email.indexOf("@"); // 4 — позиція першого збігу, -1 якщо не знайденоslice(start, end) повертає підрядок від start до end (не включно); від'ємні індекси рахують з кінця — той самий принцип, що й у методів масивів:
const text = "JavaScript";
text.slice(0, 4); // "Java"
text.slice(4); // "Script" — до кінця рядка
text.slice(-6); // "Script" — останні 6 символівconst csv = "яблуко,банан,вишня";
const fruits = csv.split(","); // ["яблуко", "банан", "вишня"]
fruits.join(" | "); // "яблуко | банан | вишня" — join є методом масиву, зворотний до splitconst input = " test@example.com ";
input.trim(); // "test@example.com" — з обох боків
input.trimStart(); // "test@example.com " — лише з початку
input.trimEnd(); // " test@example.com" — лише з кінцяtrim() варто викликати для будь-якого текстового поля вводу перед валідацією чи збереженням — користувачі часто ненавмисно залишають пробіли на початку чи в кінці.
const message = "привіт привіт привіт";
message.replace("привіт", "бувай"); // "бувай привіт привіт" — лише ПЕРШИЙ збіг
message.replaceAll("привіт", "бувай"); // "бувай бувай бувай" — усі збігиДоповнюють рядок до потрібної довжини символом-заповнювачем — типове застосування: форматування чисел із провідними нулями:
const orderId = "42";
orderId.padStart(6, "0"); // "000042"
"5".padStart(2, "0"); // "05" — типово для форматування часу (хвилини, секунди)Ми використовували `text ${variable}` із самого початку курсу для підстановки значень — шаблонні рядки також природно підтримують багаторядковий текст без спеціальних символів переносу:
const address = `Вулиця: Хрещатик
Місто: Київ
Індекс: 01001`;
// звичайний рядок так само вимагав би \n на кожному переносі — шаблонний рядок переносить як єУсередині ${} можна писати будь-який вираз, не лише ім'я змінної:
const price = 100;
`Ціна з ПДВ: ${(price * 1.2).toFixed(2)}`; // "Ціна з ПДВ: 120.00"function truncate(text, maxLength) {
if (text.length <= maxLength) return text;
return text.slice(0, maxLength).trimEnd() + "…";
}
truncate("Дуже довгий заголовок статті про JavaScript", 20);
// "Дуже довгий заголово…"Очікування, що replace() замінює всі збіги — без replaceAll() чи регулярного виразу з флагом g (наступний урок цього модуля) замінюється лише перший.
Спроба «змінити» рядок методом на кшталт str.trim() без присвоєння результату — оригінальна змінна залишиться незмінною, бо рядки immutable.
Плутанина slice з від'ємними індексами — легко переплутати напрямок відліку без явної перевірки на прикладі.
Рядки незмінні — усі методи повертають новий рядок, не чіпаючи оригінал. includes/startsWith/endsWith/indexOf шукають; slice витягує підрядок; split/join конвертують між рядком і масивом; trim прибирає зайві пробіли; replace/replaceAll заміняють; padStart/padEnd вирівнюють до потрібної довжини. Шаблонні рядки підтримують і підстановку виразів, і багаторядковий текст без екранування.
Спробуйте самостійно
Напишіть функцію formatOrderId(id), яка приймає число та повертає рядок вигляду "ORD-000042" — префікс "ORD-" плюс число, доповнене нулями до 6 цифр.