Введение в JavaScript: Конкатенация

Введение в JavaScript: Конкатенация

От автора: конкатенация – это процесс соединения вещей друг с другом. В 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

Автор: Dudley Storey

Источник: http://demosthenes.info/

Редакция: Команда webformyself.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree