4 способа объединения строк в JavaScript
Вот 4 способа объединить строки в JavaScript. Мой любимый способ - использовать строки шаблонов. Почему? Поскольку он более читабелен, нет обратной косой черты для экранирования кавычек, нет неудобного разделителя пустого пространства.
const icon = '👋';
// Template Strings
`hi ${icon}`;
// join() Method
['hi', icon].join(' ');
// Concat() Method
''.concat('hi ', icon);
// + Operator
'hi ' + icon;
// RESULT
// hi 👋1. Шаблон строки
Если вы пришли из другого языка, такого как Ruby, вы будете знакомы с термином интерполяция строк. Это именно то, чего пытается достичь шаблон строки. Это простой способ включить выражения в ваше создание строк, которые читабельны и кратки.
const name = 'samantha';
const country = '🇨🇦';Проблема отсутствия пространства в конкатенации строк
До шаблона строки будет результат моей строки 😫
"Hi, I'm " + name + "and I'm from " + country;Ты понял мою ошибку? Мне не хватает места 😫. И это очень распространенная проблема при объединении строк.
// Hi, I'm samanthaand I'm from 🇨🇦Решение с помощью шаблона строк
С шаблоном строк это решается. Вы пишете именно так, как хотите, чтобы ваша строка выглядела. Так что очень легко определить, если места не хватает.
`Hi, I'm ${name} and I'm from ${country}`;2. join()
Метод join сочетает в себе элементы массива и возвращает строку. Поскольку он работает с массивом, он очень удобен, если вы хотите добавить дополнительные строки.
const array = ['My handles are'];
const handles = [instagram, twitter, tiktok].join(', '); // @samanthaming, @samantha_ming, @samanthaming
array.push(handles); // ['My handles are', '@samanthaming, @samantha_ming, @samanthaming']
array.join(' ');
// My handles are @samanthaming, @samantha_ming, @samanthamingНастройка разделителя
Самое замечательное в join - это то, что вы можете настроить способ объединения элементов массива. Вы можете сделать это, передав разделитель в свой параметр.
const array = ['My handles are '];
const handles = [instagram, twitter, tiktok].join(', '); // @samanthaming, @samantha_ming, @samanthaming
array.push(handles);
array.join('');
// My handles are @samanthaming, @samantha_ming, @samanthaming3. concat ()
С помощью concat вы можете создать новую строку, вызвав метод для строки.
const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const tiktok = '@samanthaming';
'My handles are '.concat(instagram, ', ', twitter', ', tiktok);
// My handles are @samanthaming, @samantha_ming, @samanthamingОбъединение строки с массивом
Вы также можете использовать concat для объединения строки с массивом. Когда я передаю аргумент массива, он автоматически преобразует элементы массива в строку, разделенную запятой ,.
const array = [instagram, twitter, tiktok];
'My handles are '.concat(array);
// My handles are @samanthaming,@samantha_ming,@samanthamingЕсли вы хотите, чтобы он был отформатирован лучше, мы можем использовать join для настройки нашего разделителя.
const array = [instagram, twitter, tiktok].join(', ');
'My handles are '.concat(array);
// My handles are @samanthaming, @samantha_ming, @samanthaming4. Plus Operator (+)
Одна интересная вещь об использовании оператора + при объединении строк. Вы можете использовать его для создания новой строки или мутировать существующую строку, добавляя к ней.
Non-Mutative
Здесь мы используем + чтобы создать новую строку.
const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const tiktok = '@samanthaming';
const newString = 'My handles are ' + instagram + twitter + tiktok;Mutative
Мы также можем добавить его к существующей строке, используя +=. Так что если по какой-то причине вам нужен мутативный подход, это может быть хорошим вариантом для вас.
let string = 'My handles are ';
string += instagram + twitter;
// My handles are @samanthaming@samantha_mingО, черт, опять забыл о пространстве. Смотрите! Так легко пропустить пробел при объединении строк.
string += instagram + ', ' + twitter + ', ' + tiktok;
// My handles are @samanthaming, @samantha_ming, @samanthamingЭто все еще выглядит сыровато, давайте вставим туда join!
string += [instagram, twitter, tiktok].join(', ');
// My handles are @samanthaming, @samantha_ming, @samanthamingЭкранирование символов в строках
Когда в вашей строке есть специальные символы, вам нужно сначала экранировать эти символы при объединении. Давайте рассмотрим несколько сценариев и посмотрим, как мы можем избежать их 💪
Избегайте одинарных кавычек или апострофов (')
При создании строки вы можете использовать одинарные или двойные кавычки. Когда у вас есть одна кавычка в строке, очень простое решение состоит в том, чтобы использовать противоположность для создания строки.
const happy = 🙂;
["I'm ", happy].join(' ');
''.concat("I'm ", happy);
"I'm " + happy;
// RESULT
// I'm 🙂Конечно, вы также можете использовать обратную косую черту \, чтобы экранировать символы. Но я нахожу, что это немного трудно читать, поэтому я не часто делаю это таким образом.
const happy = 🙂;
['I\'m ', happy].join(' ');
''.concat('I\'m ', happy);
'I\'m ' + happy;
// RESULT
// I'm 🙂Поскольку строки шаблона используют backtick, этот сценарий к нему не относится 👍
Escape Double Quotes (")
Подобно экранированию одинарных кавычек, мы можем использовать ту же технику использования противоположного. Поэтому для избежания двойных кавычек мы будем использовать одинарные кавычки.
const flag = '🇨🇦';
['Canada "', flag, '"'].join(' ');
''.concat('Canada "', flag, '"');
'Canada "' + flag + '"';
// RESULT
// Canada "🇨🇦"Также можно использовать escape-символ обратной косой черты.
const flag = '🇨🇦';
['Canada "', flag, '"'].join(' ');
''.concat('Canada "', flag, '"');
'Canada "' + flag + '"';
// RESULT
// Canada "🇨🇦"Поскольку строки шаблона используют backtick, этот сценарий к нему не относится 👍
Escape Backtick
Поскольку строки шаблона используют обратные ссылки для создания своей строки, когда мы хотим вывести этот символ, мы должны экранировать его, используя обратную косую черту.
const flag = '🇨🇦';
`Use backtick \`\` to create a template string`;
// RESULT
// Use backtick `` to create a template stringПоскольку другие создания строк не используют backtick, этот сценарий к ним не относится 👍
Какой способ использовать?
Я показал несколько примеров использования различных способов объединения строк. Какой из них лучше - зависит от ситуации. Когда дело доходит до стилистических предпочтений, мне нравится следовать руководству по стилю Airbnb.
При программном построении строк используйте шаблонные строки вместо конкатенации.
Почему другие способы все еще имеют значение?
Еще важно знать и другие способы. Зачем? Потому что не каждая кодовая база будет следовать этому правилу, или вы можете иметь дело с устаревшей кодовой базой. Как разработчик, мы должны быть в состоянии адаптироваться и понимать любую среду, в которой мы оказались. Мы находимся там, чтобы решать проблемы, а не жаловаться на то, насколько устарела технология.
