Пошук уроків, статей та іншого контенту
Навчіться працювати з текстовими значеннями: створювати рядки за допомогою різних типів лапок, використовувати шаблонні рядки та виконувати базові операції з текстом.
stringstring — це тип даних у JavaScript, який використовують для зберігання тексту.
Рядком може бути:
одне слово;
речення;
набір символів;
порожній текст;
текст із цифрами та спеціальними символами.
const name = "Олена";
const message = "Привіт, світе!";
const emptyText = "";
console.log(name);
console.log(message);
console.log(emptyText);У JavaScript рядкові значення мають тип string:
const language = "JavaScript";
console.log(typeof language); // stringРядок можна записати в подвійних лапках:
const city = "Київ";Також можна використовувати одинарні лапки:
const country = 'Україна';Подвійні та одинарні лапки працюють однаково. Важливо, щоб лапка на початку збігалася з лапкою в кінці:
const firstName = "Марія";
const lastName = 'Шевченко';Такий запис буде помилковим:
// const message = "Привіт'; // лапки не збігаютьсяТретій варіант — зворотні лапки. Вони мають особливу назву — шаблонні рядки:
const greeting = `Привіт!`;Шаблонні рядки дають змогу зручно вставляти значення змінних у текст.
Іноді потрібно додати до рядка лапки або перейти на новий рядок. Для цього використовують спеціальні послідовності символів.
\n означає перехід на новий рядок:
const poem = "Рядок перший\nРядок другий";
console.log(poem);Результат:
Рядок перший
Рядок другийЯкщо рядок створено подвійними лапками, одинарні лапки всередині нього не потребують додаткового запису:
const message = "Вона сказала: 'Привіт!'";Якщо потрібно використати такі самі лапки, як навколо рядка, перед ними ставлять зворотну косу риску \:
const message = "Він сказав: \"Привіт!\"";
console.log(message);Інший варіант — використати різні типи лапок:
const message = 'Він сказав: "Привіт!"';Рядки можна об'єднувати за допомогою оператора +. Ця операція називається конкатенацією.
const firstName = "Олена";
const lastName = "Коваль";
const fullName = firstName + " " + lastName;
console.log(fullName); // Олена КовальПробіл потрібно додати окремо як " ". Без нього слова з'єднаються:
const fullName = firstName + lastName;
console.log(fullName); // ОленаКовальРядки можна об'єднувати не лише зі змінними, а й безпосередньо:
const message = "JavaScript" + " " + "це цікаво!";
console.log(message); // JavaScript це цікаво!Шаблонні рядки записують у зворотних лапках:
const userName = "Андрій";
const age = 25;
const message = `Мене звати ${userName}. Мені ${age} років.`;
console.log(message);Вираз ${...} називають вставкою або інтерполяцією. У ньому можна вказати змінну чи вираз JavaScript:
const price = 100;
const quantity = 3;
const total = `Загальна вартість: ${price * quantity} грн`;
console.log(total); // Загальна вартість: 300 грнШаблонні рядки також зручно використовувати для тексту в кількох рядках:
const text = `Перший рядок
Другий рядок
Третій рядок`;
console.log(text);Властивість length повертає кількість символів у рядку:
const word = "JavaScript";
console.log(word.length); // 10Пробіли також вважаються символами:
const text = "Привіт, світ!";
console.log(text.length);Кожен символ у рядку має індекс. Індекси починаються з нуля:
J a v a S c r i p t
0 1 2 3 4 5 6 7 8 9Отримати символ можна за допомогою квадратних дужок:
const word = "JavaScript";
console.log(word[0]); // J
console.log(word[4]); // S
console.log(word[9]); // tОстанній символ можна отримати через його індекс:
const word = "JavaScript";
console.log(word[word.length - 1]); // tЯкщо вказати індекс, якого не існує, результатом буде undefined:
const word = "Кіт";
console.log(word[10]); // undefinedРядки в JavaScript не можна змінювати безпосередньо:
const word = "Кіт";
// word[0] = "М"; // такий запис не змінить рядокЗамість цього потрібно створити новий рядок:
const word = "Кіт";
const newWord = "М" + word.slice(1);
console.log(newWord); // МітМетод includes() перевіряє, чи містить рядок певний текст. Він повертає true або false:
const message = "Вітаємо на курсі JavaScript!";
console.log(message.includes("JavaScript")); // true
console.log(message.includes("Python")); // falseМетоди startsWith() і endsWith() перевіряють початок та кінець рядка:
const fileName = "report.pdf";
console.log(fileName.startsWith("report")); // true
console.log(fileName.endsWith(".pdf")); // trueМетод indexOf() повертає індекс першого входження тексту:
const message = "Привіт, JavaScript!";
console.log(message.indexOf("JavaScript")); // 8
console.log(message.indexOf("Python")); // -1Якщо текст не знайдено, метод повертає -1.
Методи toUpperCase() і toLowerCase() створюють рядок у верхньому або нижньому регістрі:
const word = "JavaScript";
console.log(word.toUpperCase()); // JAVASCRIPT
console.log(word.toLowerCase()); // javascriptПочатковий рядок при цьому не змінюється:
const word = "JavaScript";
const upperWord = word.toUpperCase();
console.log(word); // JavaScript
console.log(upperWord); // JAVASCRIPTМетод trim() видаляє пробіли на початку та в кінці рядка:
const userInput = " Олена ";
const cleanInput = userInput.trim();
console.log(cleanInput); // ОленаПробіли всередині тексту не видаляються:
const text = "Привіт, світ!";
console.log(text.trim()); // Привіт, світ!Метод slice() повертає частину рядка:
const word = "JavaScript";
console.log(word.slice(0, 4)); // Java
console.log(word.slice(4)); // ScriptПерший параметр — початковий індекс, а другий — індекс, до якого потрібно взяти символи, не включаючи його.
const text = "Привіт";
console.log(text.slice(0, 3)); // ПриМетод replace() замінює перше знайдене входження:
const message = "Я вивчаю HTML";
const newMessage = message.replace("HTML", "JavaScript");
console.log(newMessage); // Я вивчаю JavaScriptЦей метод також не змінює початковий рядок.
Якщо додати рядок до числа за допомогою +, JavaScript об'єднає значення в рядок:
const result = "10" + 5;
console.log(result); // 105
console.log(typeof result); // stringУ цьому випадку число 5 перетворилося на текст "5".
Інші арифметичні оператори можуть поводитися інакше:
const result = "10" - 5;
console.log(result); // 5Такий неочікуваний результат може спричинити помилки в програмі. Якщо потрібно отримати число з тексту, краще зробити перетворення явно:
const textNumber = "10";
const number = Number(textNumber);
console.log(number + 5); // 15
console.log(typeof number); // numberУ наступному прикладі програма формує привітання для користувача та перевіряє його ім'я:
const firstName = " Олена ";
const lastName = "Коваль";
const age = 28;
const cleanFirstName = firstName.trim();
const fullName = `${cleanFirstName} ${lastName}`;
console.log(`Вітаємо, ${fullName}!`);
console.log(`Ваш вік: ${age}.`);
console.log(`Ім'я містить ${cleanFirstName.length} символів.`);
console.log(`Це повне ім'я? ${fullName.includes(" ")}`);У цьому прикладі:
trim() видаляє зайві пробіли навколо імені.
Шаблонний рядок об'єднує ім'я та прізвище.
length визначає довжину імені.
includes() перевіряє, чи містить повне ім'я пробіл.
Рядки можна порівнювати за допомогою операторів === і !==:
const password = "qwerty";
const enteredPassword = "qwerty";
console.log(password === enteredPassword); // trueРегістр має значення:
console.log("JavaScript" === "javascript"); // falseЩоб порівняти текст без урахування регістру, можна привести обидва рядки до нижнього регістру:
const answer = "ТАК";
const expectedAnswer = "так";
console.log(answer.toLowerCase() === expectedAnswer); // trueКожен рядок повинен мати парну лапку:
// const message = "Привіт; // помилкаПравильно:
const message = "Привіт";Початкова та кінцева лапки мають бути одного типу:
// const message = 'Привіт"; // помилкаПравильно:
const message = 'Привіт';const firstName = "Олена";
const lastName = "Коваль";
console.log(firstName + lastName); // ОленаКовальЯкщо між словами потрібен пробіл, його слід додати явно:
console.log(firstName + " " + lastName); // Олена Ковальlength і length()length — це властивість, а не метод. Після неї не ставлять круглі дужки:
const word = "Привіт";
console.log(word.length); // правильно
// console.log(word.length()); // помилкаМетоди рядків зазвичай повертають новий рядок, а не змінюють початковий:
const text = "hello";
text.toUpperCase();
console.log(text); // helloЩоб зберегти результат, його потрібно записати:
const text = "hello";
const upperText = text.toUpperCase();
console.log(upperText); // HELLOstring — тип даних для роботи з текстом.
Рядки можна створювати в одинарних, подвійних і зворотних лапках.
Шаблонні рядки дають змогу вставляти змінні через ${...}.
Оператор + об'єднує рядки.
Властивість length повертає кількість символів.
Індексація рядків починається з нуля.
includes() перевіряє наявність тексту.
toUpperCase() і toLowerCase() змінюють регістр у новому рядку.
trim() прибирає зайві пробіли на початку та в кінці.
slice() отримує частину рядка.
Рядки незмінні: методи створюють нові значення, а не змінюють початковий рядок.