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

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

От автора: конкатенация – это процесс соединения вещей друг с другом. В JavaScript конкатенация чаще всего используется для соединения значений переменных друг с другом, или строк со строками (для образования более длинных строк).

Базовый оператор конкатенации в JavaScript, немного сбивающий с толку, – это оператор + (такой же, как и оператор сложения). Несколько примеров:

Базовая конкатенация

Результат в консоли:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Обратите внимание на дополнительный пробел, добавленный к первой строке; JavaScript не будет автоматически добавлять пробелы во время конкатенации. В качестве альтернативного варианта можно прописать следующее:

Конкатенация с помощью оператора присваивания

Нередко мы заносим строку в переменную, а затем хотим добавить другую строку к уже существующей информации. Мы можем сделать это с помощью оператора присваивания со сложением +=:

Обратите внимание на то, что в процессе выполнения операций значение переменной welcome будет полностью изменено.

Различные приемы: concat

Метод concat также соединяет строки друг с другом:

Обратите внимание, что здесь также необходимо вставлять дополнительные пробелы, чтобы они были отображены в конечном результате. Вы также можете применить метод .concat к пустой строке, добавляя к ней новые строки:

Как правило, следует, по возможности, избегать метод concat, т.к. он работает значительно медленнее, чем операторы + или +=.

join

Метод join соединяет все элементы массива в строку. Например, у вас есть массив cats:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Обратите внимание, что метод .join автоматически использует в качестве разделителя запятую, с помощью которой разделяются элементы в самом массиве. Данное поведение может быть изменено, и вы можете использовать любой разделитель, включая пробелы:

И снова, метод .join работает медленнее, чем стандартный оператор +, и его следует избегать, по возможности.

Путаница с конкатенацией

Многие новички, пишущие код на JavaScript, часто допускают распространенную (сбивающую с толку) ошибку при конкатенации. Хорошим примером является следующая запись:

В качестве результата вы могли бы ожидать 30. Вместо этого результат будет следующим:

Что происходит? Неожиданный результат объясняется тем, что JavaScript сначала производит конкатенацию текста с переменной, а не сложение переменных.

В JavaScript числа, соединенные со строкой, превращаются в строку, а не число. Так происходит, потому что по умолчанию JavaScript выполняет код слева направо, т.е. если бы мы могли замедлить работу JavaScript интерпретатора, то мы бы увидели следующий порядок выполнения операций:

Мы можем определить, что должно быть соединено в первую очередь, взяв нужные нам части выражения в круглые скобки:

Теперь мы получим ожидаемый результат:

Автор: Dudley Storey

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

Научиться

Метки:

Похожие статьи:

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

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

Комментарии (2)

  1. Alex

    хочу вывести на экран сумму а и b, но всегда получаю слияние чисел, подскажите пожалуйста, в чем моя проблема
    var a = prompt(«Введите число a»)
    var b = prompt(«Введите число b»)
    var c = a + b
    alert(c)

    • Alex

      Попробуйте следующее:

      var a = +prompt(«Введите число a»)
      var b = +prompt(«Введите число b»)
      var c = a + b
      alert(c)

      Знак «+» перед prompt переведет ваш тип данных в числовой

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

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

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

Я не робот.

Spam Protection by WP-SpamFree