От автора: конкатенация – это процесс соединения вещей друг с другом. В JavaScript конкатенация чаще всего используется для соединения значений переменных друг с другом, или строк со строками (для образования более длинных строк).
Базовый оператор конкатенации в JavaScript, немного сбивающий с толку, – это оператор + (такой же, как и оператор сложения). Несколько примеров:
Базовая конкатенация
|
1 2 |
var title = "We wish " + "to be friends"; console.log(title); |
Результат в консоли:
|
1 |
> We wish to be friends |
Обратите внимание на дополнительный пробел, добавленный к первой строке; JavaScript не будет автоматически добавлять пробелы во время конкатенации. В качестве альтернативного варианта можно прописать следующее:
|
1 2 3 4 |
var welcome = "Come sit"; var direction = "by the hearth"; console.log(welcome + " " + direction); > Come sit by the hearth |
Конкатенация с помощью оператора присваивания
Нередко мы заносим строку в переменную, а затем хотим добавить другую строку к уже существующей информации. Мы можем сделать это с помощью оператора присваивания со сложением +=:
|
1 2 3 4 5 |
var welcome = "Good "; var time = "evening"; welcome += evening; console.log(welcome); > Good evening |
Обратите внимание на то, что в процессе выполнения операций значение переменной welcome будет полностью изменено.
Различные приемы: concat
Метод concat также соединяет строки друг с другом:
|
1 2 3 4 |
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 к пустой строке, добавляя к ней новые строки:
|
1 |
var riddle = "".concat("The man had ", "seven wives"); |
Как правило, следует, по возможности, избегать метод concat, т.к. он работает значительно медленнее, чем операторы + или +=.
join
Метод join соединяет все элементы массива в строку. Например, у вас есть массив cats:
|
1 2 3 4 |
var cats = ['Artemis', 'Catbus', 'Duchess', 'Figaro', 'Kuroneko-sama', 'Scratchy']; var joinedNames = cats.join(); console.log(joinedNames); > "Artemis,Catbus,Duchess,Figaro,Kuroneko-sama,Scratchy" |
Обратите внимание, что метод .join автоматически использует в качестве разделителя запятую, с помощью которой разделяются элементы в самом массиве. Данное поведение может быть изменено, и вы можете использовать любой разделитель, включая пробелы:
|
1 2 |
var joinedNames = cats.join(' '); > "Artemis Catbus Duchess Figaro Kuroneko-sama Scratchy" |
И снова, метод .join работает медленнее, чем стандартный оператор +, и его следует избегать, по возможности.
Путаница с конкатенацией
Многие новички, пишущие код на JavaScript, часто допускают распространенную (сбивающую с толку) ошибку при конкатенации. Хорошим примером является следующая запись:
|
1 2 3 |
var a = 10; var b = 20; console.log('Total is ' + a + b); |
В качестве результата вы могли бы ожидать 30. Вместо этого результат будет следующим:
|
1 |
> Total is 1020 |
Что происходит? Неожиданный результат объясняется тем, что JavaScript сначала производит конкатенацию текста с переменной, а не сложение переменных.
В JavaScript числа, соединенные со строкой, превращаются в строку, а не число. Так происходит, потому что по умолчанию JavaScript выполняет код слева направо, т.е. если бы мы могли замедлить работу JavaScript интерпретатора, то мы бы увидели следующий порядок выполнения операций:
|
1 2 |
> Total is 10 > Total is 1020 |
Мы можем определить, что должно быть соединено в первую очередь, взяв нужные нам части выражения в круглые скобки:
|
1 |
console.log('Total is ' + (a + b)); |
Теперь мы получим ожидаемый результат:
|
1 |
> Total is 30 |
Автор: Dudley Storey
Источник: //demosthenes.info/
Редакция: Команда webformyself.
Комментарии (2)