Конкатенація рядків

JavaScriptJunior~1 хв читання

Визначення

Конкатенація рядків - це операція, при якій дві або більше рядки об'єднуються в один.

Приклад

javascript

const firstName = 'Oleh';
const lastName = 'Kovalenko';

const fullName = firstName + ' ' + lastName;

console.log(fullName); // "Oleh Kovalenko"

Тут оператор + використовується для склеювання рядків. JS не додає їх як числа, а з'єднує, тому що хоча б один операнд є рядком.

Поведінка оператора `+`

Якщо один з операндів - рядок, JS автоматично приводить інший операнд до рядка:

javascript

'Вік: ' + 25;  // "Вік: 25"
'Відповідь: ' + true;  // "Відповідь: true"
'Масив: ' + [1,2,3]; // "Масив: 1,2,3"

Це і є приклад неявного перетворення типів (type coercion).

Приклад з кількома рядками

javascript

const message = 'Привіт, ' + 'світ' + '!';
console.log(message); // "Привіт, світ!"

Альтернатива: шаблонні рядки (Template literals)

Сучасний спосіб (ES6+) - використовувати зворотні лапки ` і вбудовувати змінні через ${}:

javascript

const name = 'Oleh';
const age = 25;

const message = `Мене звати ${name}, мені ${age} років.`;

console.log(message); // "Мене звати Oleh, мені 25 років."

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

Приклад з переносом рядків

Раніше (до ES6):

javascript

const text = 'Перший рядок\n' + 'Другий рядок';

З шаблонними рядками:

javascript

const text = `
Перший рядок
Другий рядок
`;

Конкатенація різних типів

javascript

console.log('5' + 5);   // "55"
console.log('true: ' + true); // "true: true"
console.log(1 + '2' + 3); // "123"

JS завжди перетворює числа на рядки, якщо хоча б один операнд - рядок.

Підсумок

Спосіб	Приклад	Результат
Оператор `+`	`'Hello ' + 'World'`	`'Hello World'`
Шаблонні рядки	`Hello ${name}`	`'Hello Oleh'`
Неявне перетворення	`'Вік: ' + 25`	`'Вік: 25'`

Коротко

Конкатенація = об'єднання рядків. Виконується через + або шаблонні рядки ...${}.... Якщо хоча б один операнд - рядок, JS приводить усе до рядка.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.