В программировании существует такая операция как конкатенация которая позволяет объединить две строки в одну. В JavaScript конкатенация используется для того, чтобы соединить две переменные или две строки между собой.
Таким образом ее цель сделать из двух одну.
Способов использования конкатенации существует несколько, естественно каждая имеет свою цель потому давайте постараемся разобраться с каждой по отдельности!
Базовая конкатенация JS
Базовый оператор конкатенации может немного удивить тем, что для соединения мы используем +, то есть казалось бы что это арифметический оператор, но все-же разработчики посчитали иначе и сделали его также оператором конкатенации.
Давайте ниже я приведу два простых примера которые покажут как работает самое простое соединение двух строк:
let string = "I love " + "programming on JavaScript"; console.log(string);
В результате консоль выдаст нам такую строку:
> I love programming on JavaScript
Как видите я учел тот пробел который идет после слова love и перед словом programming. Но как альтернатива можно сделать иначе, хотя все-равно получается похожая ситуация:
let string1 = "I love"; let string2 = "programming on JavaScript"; console.log(string1 + " " + string2);
Результат:
> I love programming on JavaScript
Конкатенация с помощью оператора присваивания
Помимо такого способа можно сделать это с помощью оператора присваивания (+=), очень удобно его также использовать внутри цикла, тем самым собрать огромную строку.
let love= "I love "; let programming = "programming on JavaScript"; love += programming; console.log(love);
Результат:
> I love programming on JavaScript
Стоит обратить внимание, что изначально переменная love сильно отличалась от конечного варианта.
concat — метод присваивания в Javascript
Существует также еще один метод это метод concat, давайте разберемся как это работает:
let site= "Allfrontend.online ";
let best = site.concat("is a best ","website ever");
console.log(best);
Результат:
> Allfrontend.online is a best website ever
Хочу подметить что здесь мы точно также добавили дополнительные пробелы, но также помимо этого мы можем применить этот метод и к пустой строке, а не только использовать уже к существующей:
let site = "".concat("Allfrontend.online is a best website ever");
console.log(site);
> Allfrontend.online is a best website ever
Но что самое важное, этот метод значительно медленее чем базовая конкатенация и конкатенация с помощью оператора присваивания.
join — соединяющая функция для массивов в JS
Бывают случаи когда нужно объединить все элементы массива в одну строку, в JavaScript для этого можно использовать join, давайте рассмотрим примеры:
let a = ['time', 'life', 'date'];
let myVar1 = a.join(); // присвоит 'time,life,date' переменной myVar1
let myVar2 = a.join(', '); // присвоит 'time, life, date' переменной myVar2
let myVar3 = a.join(' + '); // присвоит 'time + life + date' переменной myVar3
let myVar4 = a.join(''); // присвоит 'timelifedate' переменной myVar4
Небольшое уточнение (баг) по конкатенации
Есть в JavaScript интересный момент который я считаю очень важно учитывать так как при конкатенации как я и писал выше JavaScript не использует логические операторы, но обойти эту проблему очень просто, давайте покажу что собственно я имею ввиду:
let a = 20;
let b = 20;
console.log('Total is ' + a + b);
В итоге мы получаем такой ответы консоли:
> Total is 2020
Логично было бы если бы ответ был не 2020, а просто 40, но как мы видим, он логический оператор определил как конкатенацию и просто объединил вместо сложения.
Но я уверен что нужно многие захотят сложить потому достаточно следать следующий трюк:
let a = 20;
let b = 20;
console.log('Total is ' + (a + b));
Результат:
> Total is 40
Заключение
В принципе как видите использование конкатенации не только очень простое но и достаточно полезное так как соединение строк я лично к примеру использую часто особенно когда нужно с помощью Ajax передать куски HTML в шаблон.
Метки: JavaScript, Конкатенация, Основы программирования