JavaScript Basics: String Concatenation with Variables and Interpolation
In JavaScript, we can assign strings to a variable and use concatenation to combine the variable to another string.
To concatenate a string, you add a plus sign+ between the strings or string variables you want to connect.
Above, we created a variable myPet and assigned it “seahorse” . On the second line, we concatenated three strings: “My favorite animal is the “ (include the space at the end), the variable, and the period. The result is “My favorite animal is the seahorse.”
Using a single quote or a double quote doesn’t matter as long as your opening and closing quotes are the same. The one time it matters if you are using a word that has an apostrophe like “I’m”. It will be easier to use a double quote instead of using an escape character.
Another thing to take note of is when concatenating numbers and strings. When you concatenate a number with a string, the number becomes a string.
Another way to include a variable to a string is through String Interpolation. In JavaScript, you can insert or interpolate variables into strings using template literals. Here is an example of a template literal using our first example:
Template literals are enclosed in backticks. You write the string as normal but for the variable you want to include in the string, you write the variable like this: $ . For the example above, the output will be the same as the example before it that uses concatenation. The difference is, the interpolation example is much easier to read.
If you want to read more JavaScript basics articles, you can check out my recent ones here:
Как вставить переменную в строку js
Шаблоны строк (template strings / template literals) позволяют вставлять в строку различные значения. Подобный прием еще называют интерполяцией. Для этого строки заключаются в косые кавычки, а вставляемое значение предваряется символом $ и заключается в фигурные скобки:
Здесь на место $
Подобным образом в строку можно вставлять сразу несколько значений:
Также вместо скалярных значений могут добавляться свойства сложных объектов:
Любо можно вставлять более сложные вычисляемые выражения:
В первом случае в шаблоне вызывается функция sum() , параметрам которой передаются значения констант a и b : $
Во втором случае в шаблоне выполняется операция умножения констант: $ < a * b>.
html-код в шаблонах
Шаблоны также могут хранить html-код, который будет динамически формироваться.
Вложенные шаблоны
Рассмотрим другой пример — создадим из элементов массива список html:
В данном случае мы имеем дело с вложенным шаблоном. То есть вначале определяется общий внешний шаблон:
А в динамически формируемом выражении применяется еще один шаблон:
В данном случае у массива people вызывается функция map() , которое определяет некоторое действие для каждого элемента массива. Это действие передается в map() в виде функции. Здесь для упрощения в качестве такой функции применяется лямбда-выражение. Оно получает каждый элемент массива через параметр person и для него формирует шаблон строки `<li>$
Тег-функции и передача шаблона строки в функцию
JavaScript позволяет передать в функцию шаблон строки, причем не просто как строку, но и все ее динамчески вычисляемые фрагменты в виде отдельных параметров. Для этого применяются тег-функции (tag function). Подобная возможность может применяться, например, для предобработки шаблонов и их значений. Рассмотрим следующий пример:
Здесь определена tag-функция check() , которая имеет два параметра: parts и name
Параметр parts — это массив частей шаблона, разделенных вставляемыми динамическими фрагментами. Второй параметр — name — это динамически вычисляемый фрагмент шаблона. То есть в данном случае мы предполагаем, что шаблон строки, который передается в функцию check() , будет иметь только один динамчески вычисляемый фрагмент. Соответственно в массиве parts будет два элемента: статическая часть шаблона, которая идет до вычисляемого фрагмента, и часть шаблона, которая идет после.
Чтобы было более ясно, о чем идет речь, в функции выводим на консоль эти элементы массива parts.
Функция возвращает return parts[0] + name + parts[1] , то есть по сути мы просто возвращаем ранее сформированный шаблон, ничего не меняя.
Обратите внимание, как мы передаем этой функции шаблон:
шаблон просто указывается после названия функции. Или иначе говоря, tag-функция указывается как префикс перед шаблоном.
Результат работы программы:
Из консольного вывода мы видим, что элементами массива parts являются подстроки «Person: » и «.». А в качестве значения параметра name передается строка «Tom». Стоит отметить, что даже если после динамически вычисляемого фрагмента больше не было бы никаких символов (например, `Person: $
Но в примере выше мы просто возвращали то же содержимое, которое было сформировано на основе шаблона. Однако мы можем выполнить некоторую обработку:
В данном случае, если в шаблон передается значение «Admin», то возвращаем один результат, иначе возвращаем, то, что было бы сформированно на основе шаблона.
Подобным образом можно обрабатывать шаблоны с большим количеством вычисляемых фрагментов:
В данном случае шаблон содержит два динамческих фрагмента. Соответственно в массива part будет три элемента.
В функции check() в зависимости от значения второго динамического фрамегмента (условного возраста пользователя) возвращаем то или иное значение.
Строки
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Есть ряд улучшений и новых методов для строк.
Начнём с, пожалуй, самого важного.
Строки-шаблоны
Добавлен новый вид кавычек для строк:
Основные отличия от двойных "…" и одинарных ‘…’ кавычек:
В них разрешён перевод строки.
Заметим, что пробелы и, собственно, перевод строки также входят в строку, и будут выведены.
Можно вставлять выражения при помощи $ <…>.
Как видно, при помощи $ <…>можно вставлять как и значение переменной $
Функции шаблонизации
Можно использовать свою функцию шаблонизации для строк.
Название этой функции ставится перед первой обратной кавычкой:
Эта функция будет автоматически вызвана и получит в качестве аргументов строку, разбитую по вхождениям параметров $ <…>и сами эти параметры.
В примере выше видно, что строка разбивается по очереди на части: «кусок строки» – «параметр» – «кусок строки» – «параметр».
- Участки строки идут в первый аргумент-массив strings .
- У этого массива есть дополнительное свойство strings.raw . В нём находятся строки в точности как в оригинале. Это влияет на спец-символы, например в strings символ \n – это перевод строки, а в strings.raw – это именно два символа \n .
- Дальнейший список аргументов функции шаблонизации – это значения выражений в $ <. >, в данном случае их три.
В отличие от strings , в strings.raw содержатся участки строки в «изначально введённом» виде.
То есть, если в строке находится \n или \u1234 или другое особое сочетание символов, то оно таким и останется.
Это нужно в тех случаях, когда функция шаблонизации хочет произвести обработку полностью самостоятельно (свои спец. символы?). Или же когда обработка спец. символов не нужна – например, строка содержит «обычный текст», набранный непрограммистом без учёта спец. символов.
Как видно, функция имеет доступ ко всему: к выражениям, к участкам текста и даже, через strings.raw – к оригинально введённому тексту без учёта стандартных спец. символов.
Функция шаблонизации может как-то преобразовать строку и вернуть новый результат.
В простейшем случае можно просто «склеить» полученные фрагменты в строку:
Функция str в примере выше делает то же самое, что обычные обратные кавычки. Но, конечно, можно пойти намного дальше. Например, генерировать из HTML-строки DOM-узлы (функции шаблонизации не обязательно возвращать именно строку).
Или можно реализовать интернационализацию. В примере ниже функция i18n осуществляет перевод строки.
Она подбирает по строке вида "Hello, $
Итоговое использование выглядит довольно красиво, не правда ли?
Разумеется, эту функцию можно улучшить и расширить. Функция шаблонизации – это своего рода «стандартный синтаксический сахар» для упрощения форматирования и парсинга строк.
Улучшена поддержка Юникода
Внутренняя кодировка строк в JavaScript – это UTF-16, то есть под каждый символ отводится ровно два байта.
Но под всевозможные символы всех языков мира 2 байт не хватает. Поэтому бывает так, что одному символу языка соответствует два Юникодных символа (итого 4 байта). Такое сочетание называют «суррогатной парой».
Самый частый пример суррогатной пары, который можно встретить в литературе – это китайские иероглифы.
Заметим, однако, что не всякий китайский иероглиф – суррогатная пара. Существенная часть «основного» Юникод-диапазона как раз отдана под китайский язык, поэтому некоторые иероглифы – которые в неё «влезли» – представляются одним Юникод-символом, а те, которые не поместились (реже используемые) – двумя.
В тексте выше для первого иероглифа есть отдельный Юникод-символ, и поэтому длина строки 1 , а для второго используется суррогатная пара. Соответственно, длина – 2 .
Китайскими иероглифами суррогатные пары, естественно, не ограничиваются.
Ими представлены редкие математические символы, а также некоторые символы для эмоций, к примеру:
В современный JavaScript добавлены методы String.fromCodePoint и str.codePointAt – аналоги String.fromCharCode и str.charCodeAt , корректно работающие с суррогатными парами.
Например, charCodeAt считает суррогатную пару двумя разными символами и возвращает код каждой:
…В то время как codePointAt возвращает его Unicode-код суррогатной пары правильно:
Метод String.fromCodePoint(code) корректно создаёт строку из «длинного кода», в отличие от старого String.fromCharCode(code) .
Более старый метод fromCharCode в последней строке дал неверный результат, так как он берёт только первые два байта от числа 119987 и создаёт символ из них, а остальные отбрасывает.
Есть и ещё синтаксическое улучшение для больших Unicode-кодов.
В JavaScript-строках давно можно вставлять символы по Unicode-коду, вот так:
Синтаксис: \uNNNN , где NNNN – четырёхзначный шестнадцатиричный код, причём он должен быть ровно четырёхзначным.
«Лишние» цифры уже не войдут в код, например:
Чтобы вводить более длинные коды символов, добавили запись \u
Unicode-нормализация
Во многих языках есть символы, которые получаются как сочетание основного символа и какого-то значка над ним или под ним.
Например, на основе обычного символа a существуют символы: àáâäãåā . Самые часто встречающиеся подобные сочетания имеют отдельный Юникодный код. Но отнюдь не все.
Для генерации произвольных сочетаний используются несколько Юникодных символов: основа и один или несколько значков.
Например, если после символа S идёт символ «точка сверху» (код \u0307 ), то показано это будет как «S с точкой сверху» Ṡ .
Если нужен ещё значок над той же буквой (или под ней) – без проблем. Просто добавляем соответствующий символ.
К примеру, если добавить символ «точка снизу» (код \u0323 ), то будет «S с двумя точками сверху и снизу» Ṩ .
Пример этого символа в JavaScript-строке:
Такая возможность добавить произвольной букве нужные значки, с одной стороны, необходима, а с другой стороны – возникает проблемка: можно представить одинаковый с точки зрения визуального отображения и интерпретации символ – разными сочетаниями Unicode-кодов.
В первой строке после основы S идёт сначала значок «верхняя точка», а потом – нижняя, во второй – наоборот. По кодам строки не равны друг другу. Но символ задают один и тот же.
С целью разрешить эту ситуацию, существует Юникодная нормализация, при которой строки приводятся к единому, «нормальному», виду.
В современном JavaScript это делает метод str.normalize().
Забавно, что в данной конкретной ситуации normalize() приведёт последовательность из трёх символов к одному: \u1e68 (S с двумя точками).
Это, конечно, не всегда так, просто в данном случае оказалось, что именно такой символ в Юникоде уже есть. Если добавить значков, то нормализация уже даст несколько символов.
Для большинства практических задач информации, данной выше, должно быть вполне достаточно, но если хочется более подробно ознакомиться с вариантами и правилами нормализации – они описаны в приложении к стандарту Юникод Unicode Normalization Forms.
Полезные методы
Добавлен ряд полезных методов общего назначения:
-
– проверяет, включает ли одна строка в себя другую, возвращает true/false . – возвращает true , если строка str заканчивается подстрокой s . – возвращает true , если строка str начинается со строки s . – повторяет строку str times раз.
Конечно, всё это можно было сделать при помощи других встроенных методов, но новые методы более удобны.
JavaScript | Как вставить переменную в строку?
Мы хотим подставлять в нужное место строки свои строковые значения из переменных. Как это сделать?
В JavaScript существует 3 способа объявления строк:
- Через двойные кавычки — «
- Через одинарные кавычки — ‘
- Через обратные кавычки — `
Когда мы объявляем строку через обратные кавычки ( « ), тогда у нас появляется возможность добавлять в строку переменные при помощи экранирующей конструкции $<> .
Символ доллара $ будет восприниматься анализатором кода JavaScript, как «управляющий символ вставки переменной» только тогда, когда после него будет установлена открывающая фигурная скобка <.
Вся эта конструкция прописывается внутри нужной нам строки, где требуется вставка другой строки.
Пример вставки одной строки из одной переменной
Давайте создадим новую переменную, которая будет хранить имя человека:
Теперь мы хотим подставить значение переменной efim в переменную stroka . Допустим мы хотим приветствовать пользователя по имени на нашем сайте, чтобы он понимал, что его любят и ждут. Делается это так:
Смотрим вывод в консоль браузера:
Добавили переменную в строку — JavaScript
Видео
Пример вставки двух строк из двух переменных
У нас есть строки с дополнительными данными:
У нас есть «шаблонная» строка для вставки:
Вставку переменных в этом шаблоне мы можем сделать двумя способами
Способ № 1 — создание двух конструкций вставки в шаблонной строке
В этом случае внутри шаблонной строки мы создали две конструкции вставки. В каждую конструкцию мы поместили разные переменные.
В результате в переменной s1 будет храниться строка.
Две конструкции вставки для двух переменных — JavaScript
Обратите внимание! Между конструкциями вставки существует пробел. В итоговой строке этот пробел будет также учтён.
Способ № 2 — создание одной конструкции вставки в шаблонной строке
Поведение переменных внутри блока вставки точно такое же, как если бы мы писали выражение в коде программы. Действуют все правила синтаксиса JavaScript. Что это значит?
Мы не можем через пробел перечислить нужные нам переменные для вставки. Это вызовет синтаксическую ошибку.
alt=»Синтаксическая ошибка при перечислении переменных через пробел — JavaScript» width=»1024″ height=»81″ />Синтаксическая ошибка при перечислении переменных через пробел — JavaScript
Мы не можем через запятую перечислить имена переменных для вставки, т. к. это приведёт к вставке только последней введённой переменной в блок вставки.
Перечисление переменных через запятую в блоке вставки строки — JavaScript
Чтобы решить задачу, мы можем воспользоваться конкатенацией строк внутри блока вставки. Это склеит две строки без разделителя в виде пробела.
Склеили строки внутри блока вставки без пробела — JavaScript
Но тогда нужно дополнять конструкцию. Мы можем внутри блока вставки объявить ещё одну строку литеральным способом.
Объявили строку внутри блока вставки строк — JavaScript
И вот на этом этапе должны появиться вопросы. Например, а можно ли в блоке вставки создать ещё один блок вставки?