Рядок в JavaScript. Робота з рядками в JavaScript

37

Від автора: вітаю вас, друзі. У попередніх статтях ми з вами знайомилися з числовими типом даних в JavaScript і працювали з числами. Тепер прийшов час роботи з рядками в JavaScript. Давайте ближче познайомимося з рядковим типом даних в JavaScript.

У статті про типи даних в JavaScript ми з вами вже побіжно познайомились з типом рядок і, по суті, ми лише дізналися, що таке рядок і як вона записується. Тепер Давайте ближче познайомимося з рядками і методи роботи з ними.

Як ви пам’ятаєте, будь-який текст в JavaScript є рядком. Рядок обов’язково повинна бути укладена в лапки, одинарні або подвійні, без різниці:

var hi = ‘hello’,
name = «John»;

Зараз ми записали в змінні всього по одному слову. А що якщо ми хочемо записати великий обсяг тексту? Та без проблем, давайте запишемо в змінну який-небудь рибний текст і виведемо його на консоль:

var text = ‘Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit. Quos nisi, culpa exercitationem!’;
console.log(text);

Працює. Але якщо тексту багато, у нас напевно будуть переноси рядків, щоб починати новий абзац з нового рядка. Давайте спробуємо додати такий перенос рядка в наш текст:

Як бачимо, мій текстовий редактор вже присвітив червоним кольором можливу проблему. Давайте подивимося, як на переклад рядка в такій інтерпретації зреагує браузер:

Синтаксична помилка, як і слід було очікувати. Як же бути? Записати в змінну багаторядковий текст можна кількома способами. Про одну з них ви вже могли здогадатися, мова йде про конкатенації рядків:

Як бачимо, редактор вже нормально реагує на такий варіант запису рядка в змінну. Інший варіант — використання зворотного слешу (\), який в JavaScript і в багатьох інших мовах програмування є екрануючим символом, що дозволяє безбоязно працювати з спецсимволів. Що таке спецсимволи ми дізнаємося далі. Отже, спробуємо екранувати невидимий символ перекладу рядка:

Екранування також вирішило нашу проблему. Однак, якщо ми заглянемо в консоль, то і конкатенація рядків, і екранування переведення рядка, вирішивши проблему запису в програму, не вирішило проблему з висновком багаторядкової рядка на екран. Замість багаторядкової рядка ми побачимо в консолі текст в один рядок. Як бути?

І тут нам допоможе спеціальний символ нового рядка \n. Додавши цей спецсимвол в рядок у потрібному місці, ми скажемо інтерпретатору, що в цьому місці необхідно завершити поточний рядок і зробити перехід на новий рядок.

var text = ‘Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit.\
\nQuos nisi, culpa exercitationem!’;
console.log(text);

Власне, якщо вас не бентежить запис тексту в коді в один рядок, то ми можемо зробити і так:

var text = ‘Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dignissimos maxime et tempore omnis, ab fugit.\nQuos nisi, culpa exercitationem!’;
console.log(text);

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

Екрануючий символ зворотний слеш в коді нам дійсно не дуже потрібна в цій ситуації. А потрібен він насправді, як і зазначалося вище, для екранування спецсимволов. Наприклад, усередині рядка, яку ми уклали в одинарні лапки, зустрічається апостроф, тобто одинарна лапка:

var text = ‘Lorem ipsum d olor sit amet’;

Якщо ми спробуємо виконати цей код, то отримаємо синтаксичну помилку, оскільки апостроф буде сприйнятий інтерпретатором як закриває рядок лапки, тобто, по суті, як спецсимвол. Для того, щоб він не сприймався як спецсимвол, ми його экранируем:

var text = ‘Lorem ipsum d\’olor sit amet’;
console.log(text);

І ось тепер такий код відпрацює коректно та виведеної рядку ми побачимо саме апостроф.

На цьому ми завершимо поточну статтю. Якщо ви хочете більше дізнатися про JavaScript, тоді рекомендую звернути свою увагу на уроки по JavaScript і окремий курс по мові JavaScript. Удачі!