Від автора: конкатенація – це процес з’єднання речей один з одним. В 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
