Пошук уроків, статей та іншого контенту
Навчитеся описувати звичайні символи, спеціальні символи та екранування в шаблонах.
Символ — це окремий знак у тексті: літера, цифра, пробіл, розділовий знак або спеціальний знак.
У JavaScript текст зберігають у рядках. Рядок можна записати в одинарних лапках, подвійних лапках або зворотних лапках:
const firstName = 'Олена';
const city = "Львів";
const message = `Вітаю!`;Усі три варіанти створюють рядки. Вибір лапок залежить від ситуації та стилю коду.
Звичайні символи можна записувати без додаткових позначень:
const text = 'JavaScript';
const numberText = '123';
const punctuation = 'Привіт!';
const spaces = 'слово слово';Пробіл також є символом. Наприклад, ці рядки мають різну довжину:
const first = 'JavaScript';
const second = 'Java Script';
console.log(first.length); // 10
console.log(second.length); // 11Властивість length повертає кількість символів у рядку.
Деякі символи не можна зручно або безпечно записати безпосередньо. Наприклад:
перенос рядка;
табуляцію;
лапки всередині рядка;
зворотну скісну риску;
спеціальні керувальні послідовності.
Для таких випадків використовують екранування.
Екранування — це запис спеціального символу за допомогою зворотної скісної риски \ та іншого символу.
Зворотна скісна риска називається backslash. Не плутайте її зі звичайною скісною рискою
/.
JavaScript підтримує спеціальні послідовності символів:
\n — перенос рядка;
\t — табуляція;
\' — одинарна лапка;
\" — подвійна лапка;
\` — зворотна лапка;
\\ — одна зворотна скісна риска;
\r — повернення на початок рядка;
\b — видалення попереднього символу в деяких контекстах;
\uXXXX — символ Unicode, записаний чотирма шістнадцятковими цифрами.
Найчастіше початківцям потрібні \n, \t, \', \", \` та \\.
Послідовність \n додає перенос рядка:
const address = 'Україна\nЛьвів\nплоща Ринок, 1';
console.log(address);Результат:
Україна
Львів
площа Ринок, 1У вихідному коді ми бачимо символи \ і n, але під час виведення вони перетворюються на один перенос рядка.
Послідовність \t додає горизонтальну табуляцію:
const menu = 'Назва\tЦіна\nКава\t60 грн\nЧай\t45 грн';
console.log(menu);Результат може виглядати так:
Назва Ціна
Кава 60 грн
Чай 45 грнТочне вирівнювання залежить від середовища, у якому виводиться текст.
Якщо рядок починається і закінчується одинарними лапками, одинарну лапку всередині потрібно екранувати:
const message = 'Вона сказала: \'Привіт!\'';
console.log(message);Результат:
Вона сказала: 'Привіт!'Так само подвійні лапки можна екранувати в рядку з подвійними лапками:
const quote = "Він сказав: \"Готово!\"";
console.log(quote);Однак часто простіше використати інший тип лапок:
const message = "Вона сказала: 'Привіт!'";
const quote = 'Він сказав: "Готово!"';
console.log(message);
console.log(quote);Обидва варіанти правильні. Обирайте той, який робить код зрозумілішим.
Оскільки \ позначає початок escape-послідовності, для виведення самої зворотної скісної риски потрібно написати \\:
const path = 'C:\\Users\\Olena\\Documents';
console.log(path);Результат:
C:\Users\Olena\DocumentsУ вихідному коді кожна зворотна скісна риска записана двічі, але в готовому рядку кожна пара стає одним символом \.
Шаблонний рядок, або template literal, записують у зворотних лапках:
const message = `Це шаблонний рядок`;
console.log(message);Шаблонні рядки мають дві важливі можливості:
можуть містити переноси рядків;
підтримують підстановку значень через ${...}.
У шаблонному рядку можна перейти на новий рядок без \n:
const letter = `Добрий день!
Дякуємо за ваше повідомлення.
З повагою,
Команда підтримки`;
console.log(letter);Усі переноси та пробіли між зворотними лапками стають частиною рядка.
Це зручно для багаторядкового тексту, але зайві пробіли також збережуться.
Вираз у формі ${...} називають підстановкою або інтерполяцією:
const userName = 'Олена';
const unreadMessages = 3;
const message = `Користувач ${userName} має ${unreadMessages} непрочитані повідомлення.`;
console.log(message);Результат:
Користувач Олена має 3 непрочитані повідомлення.У ${...} можна записувати не лише змінні, а й вирази:
const price = 250;
const quantity = 2;
const result = `Загальна вартість: ${price * quantity} грн`;
console.log(result);Результат:
Загальна вартість: 500 грнУ шаблонному рядку деякі символи також потрібно екранувати.
Шаблонний рядок починається і закінчується зворотною лапкою `. Якщо потрібно вивести таку лапку всередині рядка, перед нею ставлять \:
const text = `Символ зворотної лапки: \``;
console.log(text);Результат:
Символ зворотної лапки: `${У шаблонному рядку ${ має спеціальне значення: JavaScript очікує вираз для підстановки.
Якщо потрібно вивести саме текст ${, використовуйте \${:
const example = `Це не підстановка: \${name}`;
console.log(example);Результат:
Це не підстановка: ${name}Без екранування JavaScript спробує обробити ${name} як вираз:
const name = 'Олена';
const message = `Ім'я: ${name}`;
console.log(message);Тут name — змінна, значення якої буде вставлено в рядок.
JavaScript підтримує символи Unicode, тому в рядках можна використовувати українські літери, символи валют, емодзі та інші знаки:
const text = 'Україна 🇺🇦 € © ✓';
console.log(text);Окремий символ також можна записати через Unicode-код:
const heart = '\u2764';
console.log(heart);Результат:
❤Форма \u2764 складається з:
\u — позначення Unicode-послідовності;
2764 — код символу в шістнадцятковому форматі.
Для кодів, які не вміщуються у чотири шістнадцяткові цифри, використовують фігурні дужки:
const rocket = '\u{1F680}';
console.log(rocket);Результат:
🚀У наступному прикладі використано звичайні символи, перенос рядка, табуляцію та підстановку значень:
const product = 'Ноутбук';
const price = 32000;
const quantity = 1;
const receipt = `Чек
------------
Товар:\t${product}
Ціна:\t${price} грн
Кількість:\t${quantity}
Разом:\t${price * quantity} грн
------------
Дякуємо за покупку!`;
console.log(receipt);Приблизний результат:
Чек
------------
Товар: Ноутбук
Ціна: 32000 грн
Кількість: 1
Разом: 32000 грн
------------
Дякуємо за покупку!Метод JSON.stringify() показує спеціальні символи в помітному вигляді:
const text = 'Перший рядок\nДругий рядок';
console.log(text);
console.log(JSON.stringify(text));Результат:
Перший рядок
Другий рядок
"Перший рядок\nДругий рядок"Звичайний console.log() виконує перенос рядка, а JSON.stringify() показує його як послідовність \n.
Кожен рядок повинен мати парну відкривальну та закривальну лапку:
const message = 'Привіт;Такий код спричинить синтаксичну помилку. Правильно:
const message = 'Привіт';/ і \Це різні символи:
const slash = '/';
const backslash = '\\';
console.log(slash);
console.log(backslash);Символ / не починає escape-послідовність. Для запису \ у рядку потрібна послідовність \\.
\n завжди буде видно як текстconst text = 'Один\nДва';
console.log(text);Цей код виведе два рядки, а не текст Один\nДва.
Якщо потрібно показати саме символи \ та n, екрануйте зворотну скісну риску:
const text = 'Один\\nДва';
console.log(text);Результат:
Один\nДва${} не в шаблонному рядкуПідстановка працює лише всередині зворотних лапок:
const name = 'Олена';
const message = `Привіт, ${name}!`;
console.log(message);В одинарних або подвійних лапках ${name} буде звичайним текстом:
const name = 'Олена';
const message = 'Привіт, ${name}!';
console.log(message);Результат:
Привіт, ${name}!Усі символи між зворотними лапками зберігаються:
const message = `
Привіт!
`;
console.log(message);Такий рядок починається з переносу рядка та пробілів. Якщо форматування має значення, записуйте шаблонний рядок уважно або використовуйте звичайний рядок з \n.
Рядки в JavaScript можуть бути записані в одинарних, подвійних або зворотних лапках.
Звичайні символи записують без додаткових позначень.
Спеціальні символи записують за допомогою escape-послідовностей.
\n створює перенос рядка, \t — табуляцію, \\ — зворотну скісну риску.
Лапки всередині рядка можна екранувати або використати інший тип лапок.
Шаблонні рядки записують у зворотних лапках.
У шаблонних рядках ${...} вставляє значення або результат виразу.
Щоб вивести буквальний текст ${, використовуйте \${.
JavaScript підтримує Unicode-символи, зокрема українські літери та емодзі.