Введення в JavaScript: Конкатенація

24

Від автора: конкатенація – це процес з’єднання речей один з одним. В JavaScript конкатенація найчастіше використовується для з’єднання значень змінних один з одним, або рядків з рядками (для утворення більш довгих рядків).

Базовий оператор конкатенації в JavaScript, трохи збиває з пантелику, – це оператор + (такий же, як і оператор додавання). Кілька прикладів:

Базова конкатенація

var title = «We wish» + «to be friends»;
console.log(title);
> We wish to be friends

Зверніть увагу на додатковий пробіл, доданий до першого рядка; JavaScript не буде автоматично додавати прогалини під час конкатенації. В якості альтернативного варіанту можна прописати наступне:

var welcome = «Come sit»;
var direction = «by the hearth»;
console.log(welcome + «» + direction);
> Come sit by the hearth

Конкатенація з допомогою оператора присвоювання

Нерідко ми заносимо рядок в змінну, а потім хочемо додати інший рядок до вже існуючої інформації. Ми можемо зробити це за допомогою оператора присвоювання зі складанням +=:

var welcome = «Good «;
var time = «evening»;
welcome += evening;
console.log(welcome);
> Good evening

Зверніть увагу на те, що в процесі виконання операцій значення змінної welcome буде повністю змінено.

Різні прийоми: concat

Метод concat також з’єднує рядки один з одним:

var oneDay = «One day I met «;
var riddle = oneDay.concat(«a man «,»going to St. Ives.»);
console.log(riddle);
> One day I met a man going to St. Ives.

Зверніть увагу, що тут також необхідно вставляти додаткові пробіли, щоб вони були відображені в кінцевому результаті. Ви також можете застосувати метод .concat до пустого рядка, додаючи до неї нові рядки:

var riddle = «».concat(«The man had «, «seven wives»);

Як правило, слід, по можливості, уникати метод concat, т. к. він працює значно повільніше, ніж оператори + або +=.

join

Метод join з’єднує всі елементи масиву в рядок. Наприклад, у вас є масив cats:

var cats = [‘Artemis’, ‘Catbus’, ‘Duchess’, ‘Figaro’, ‘Kuroneko-sama’, ‘Scratchy’];
var joinedNames = cats.join();
console.log(joinedNames);
> «Artemis,Catbus,Duchess,Figaro,Kuroneko-sama,Scratchy»

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

var joinedNames = cats.join(‘ ‘);
> «Artemis Catbus Duchess Figaro Kuroneko-sama Scratchy»

І знову, метод .join працює повільніше, ніж стандартний оператор +, і його слід уникати, по можливості.

Плутанина з конкатенацией

Багато новачків, які пишуть код на JavaScript, часто допускають поширену (збиває з пантелику) помилку при конкатенації. Хорошим прикладом є наступна запис:

var a = 10;
var b = 20;
console.log(‘Total is’ + a + b);

В якості результату ви могли б очікувати 30. Замість цього результат буде наступним:

> Total is 1020

Що відбувається? Несподіваний результат пояснюється тим, що JavaScript спочатку виробляє конкатенацию тексту з змінної, а не додавання змінних.

В JavaScript числа, з’єднані з рядком, перетворюються в рядок, а не кількість. Так відбувається, тому що за замовчуванням JavaScript виконує код зліва направо, тобто якщо б ми могли сповільнити роботу JavaScript інтерпретатора, то ми б побачили наступний порядок виконання операцій:
> Total is 10
> Total is 1020

Ми можемо визначити, що повинно бути пов’язане в першу чергу, взявши потрібні нам частини виразу в круглі дужки:

console.log(‘Total is’ + (a + b));

Тепер ми отримаємо очікуваний результат:

> Total is 30