Введение
Строка — это последовательность из одного или нескольких символов, которая может состоять из букв, цифр или символов. Строки в JavaScript являются примитивными и неизменяемыми типами данных, что означает, что они не изменяются.
Поскольку строки — это то, как мы отображаем текст и работаем с ним, а текст — это наш основной способ общения и понимания через компьютеры, строки — это одна из фундаментальных концепций программирования, с которой нужно ознакомиться.
В этой статье мы узнаем, как создавать и просматривать строковый вывод, как объединять строки, как хранить строки в переменных, а также правила использования кавычек, апострофов и новых строк внутри строк в JavaScript.
Создание и просмотр строкового вывода
В JavaScript есть три способа записи строки: они могут быть записаны в одинарных кавычках ( ' ' ), двойных кавычках ( " " ) или обратных кавычках ( ` ` ). Используемый тип цитирования должен совпадать с обеих сторон, однако возможно, что все три стиля могут использоваться в одном сценарии.
Строки, в которых используются двойные и одинарные кавычки, на самом деле одинаковы. Поскольку нет официального соглашения или предпочтения для строк с одной или двумя точками, все, что имеет значение, — это поддерживать согласованность в программных файлах проекта.
'This string uses single quotes.';"This string uses double quotes.";Третий и самый последний способ создания строки называется литералом шаблона. Литералы шаблонов используют обратную кавычку (также известную как серьезное ударение) и работают так же, как обычные строки с некоторыми дополнительными бонусами, которые мы рассмотрим в этой статье.
`This string uses backticks.`;Самый простой способ просмотреть вывод строки — вывести ее на консоль с помощью console.log():
console.log("This is a string in the console.");This is a string in the console.
Еще один простой способ сгенерировать значение — отправить всплывающее окно с предупреждением в браузер с помощью alert():
alert("This is a string in an alert.");Выполнение приведенной выше строки приведет к выводу в пользовательском интерфейсе браузера.
alert() — менее распространенный метод тестирования и просмотра вывода, так как закрытие предупреждений может быстро стать утомительным.
Сохранить строку в переменной
Переменные в JavaScript называются контейнерами, которые содержат значение, используя ключевые слова var, const или let. Мы можем присвоить значение строки именованной переменной.
const newString = "This is a string assigned to a variable.";Теперь, когда переменная newString содержит нашу строку, мы можем сослаться на нее и вывести ее на консоль.
console.log(newString);Это сгенерирует строковое значение.
This is a string assigned to a variable.
Используя переменные для замены строк, нам не нужно заново вводить строку каждый раз, когда мы хотим ее использовать, что облегчает нам работу и манипулирование строками в наших программах.
Объединить строки
Конкатенация означает объединение двух или более строк вместе для создания новой строки. Для конкатенации мы используем оператор конкатенации, представленный символом +. Символ + также является оператором сложения при использовании с арифметическими операциями.
Давайте создадим простой экземпляр конкатенации между "Sea" и "horse".
"Sea" + "horse";Seahorse
Конкатенация соединяет строки от начала до конца, объединяя их и создавая новое строковое значение. Если мы хотим, чтобы между словами Sea и horse был пробел, мы должны включить символ пробела в одну из строк:
"Sea " + "horse";Sea horse
Мы соединяем строки и переменные, содержащие строковые значения, с помощью конкатенации.
const poem = "The Wide Ocean";
const author = "Pablo Neruda";
const favePoem = "My favorite poem is " + poem + " by " + author ".";My favorite poem is The Wide Ocean by Pablo Neruda.
Когда мы объединяем две или более строк посредством конкатенации, мы создаем новую строку, которую можем использовать во всей нашей программе.
Переменные в строках со значениями шаблонных литералов
Особенностью литеральной функции модели является возможность включения выражений и переменных в строку. Вместо использования конкатенации мы можем использовать синтаксис ${} для вставки переменной.
const poem = "The Wide Ocean";
const author = "Pablo Neruda";
const favePoem = `My favorite poem is ${poem} by ${author}.`;My favorite poem is The Wide Ocean by Pablo Neruda.
Как мы видим, включение выражений в литералы шаблонов — это еще один способ сделать то же самое. В этом случае использование шаблонных литералов может быть проще в написании и более удобным.
Строковые литералы и строковые значения
Вы можете заметить, что строки, которые мы пишем в исходном коде, заключаются в кавычки или обратные кавычки, но фактический вывод не включает никаких кавычек.
"Beyond the Sea";Beyond the SeaСуществует различие при обращении к каждому из них. Строковый литерал — это строка, записанная в исходном коде, включая кавычки. Строковое значение (String Values) — это то, что мы видим на выходе и не включает кавычки.
В приведенном выше примере "Beyond the Sea" — буквальная строка, а Beyond the Sea » — строковое значение.
Экранирование кавычек и апострофов в строках
В связи с тем, что кавычки используются для обозначения строк, при использовании апострофов и кавычек в строках необходимо соблюдать особые меры. Попытка использовать апостроф в середине строки с одинарными кавычками, например, завершает строку, и JavaScript попытается проанализировать оставшуюся часть нужной строки как код.
Мы можем увидеть это, попробовав использовать апостроф в следующем сокращении I'm:
const brokenString = 'I'm a broken string';
console.log(brokenString);unknown: Unexpected token (1:24)То же самое верно и для попытки использовать кавычки в строке с двойными кавычками.
Чтобы предотвратить появление ошибки в таких ситуациях, у нас есть несколько вариантов, которые мы можем использовать:
- Синтаксис противоположной строки
- Побег от персонажей
- Литералы шаблонов
Мы рассмотрим эти варианты ниже.
Использовать альтернативный синтаксис строки
Простой способ обойти отдельные случаи потенциально поврежденных строк — использовать синтаксис, противоположный используемому в настоящее время.
Например, апострофы в строках, построенных с помощью ".
"We're safely using an apostrophe in double quotes."Кавычки в строках, построенных с помощью '.
'Then he said, "Hello, World!"';Комбинируя одинарные и двойные кавычки, мы можем контролировать отображение кавычек и апострофов в наших строках. Однако когда мы работаем над использованием согласованного синтаксиса в файлах программирования проекта, это может быть сложно поддерживать в базе кода.
Использование управляющего символа ( \ )
Мы можем использовать символ обратной косой черты \ escape, чтобы JavaScript не интерпретировал кавычку как конец строки.
Синтаксис \' всегда будет одинарной кавычкой, а синтаксис \" всегда будет двойной кавычкой, не опасаясь разрыва строки.
Используя этот метод, мы можем использовать апострофы в строках, построенных с помощью ".
'We\'re safely using an apostrophe in single quotes.'Мы также можем использовать двойные кавычки в строках, созданных с помощью ".
"Then he said, \"Hello, World!\"";Этот метод выглядит немного более загроможденным, но вам может понадобиться использовать и апостроф, и кавычку в одной строке, что потребует экранирования.
Использование литералов шаблонов
Литералы шаблонов определяются с помощью обратных кавычек, поэтому и кавычки, и апострофы можно безопасно использовать без какого-либо экранирования или дополнительного рассмотрения.
`We're safely using apostrophes and "quotes" in a template literal.`;
В дополнение к предотвращению необходимости экранирования символов и разрешению встроенных выражений литералы шаблонов также обеспечивают многострочную поддержку, которую мы обсудим в следующем разделе.
Длинные строки и новая строка
Бывают случаи, когда вы можете захотеть вставить в строку символ новой строки или возврата каретки. Управляющие символы \n или \r можно использовать для вставки новой строки в вывод кода.
const threeLines = "This is a string\nthat spans across\nthree lines.";This is a string
that spans across
three lines.
Технически это работает, чтобы вывести наш вывод на несколько строк. Однако запись очень длинной строки в одной строке быстро станет очень трудной для чтения и работы с ней. Мы можем использовать оператор конкатенации, чтобы отобразить строку на нескольких строках.
const threeLines = "This is a string\n" +
"that spans across\n" +
"three lines.";Вместо объединения нескольких строк мы можем использовать escape-символ \ для выхода из новой строки.
const threeLines = "This is a string\n\
that spans across\n\
three lines.";Примечание
Чтобы сделать код более читабельным, мы можем вместо этого использовать строки литералов шаблона. Это устраняет необходимость объединять или экранировать символы в длинных строках, содержащих символы новой строки. Строка и новые строки будут сохранены.
const threeLines = `This is a string
that spans across
three lines.`;This is a string
that spans across
three lines.
Важно знать обо всех способах создания новых строк и строк, занимающих несколько строк, поскольку в разных базах кода могут использоваться разные стандарты.
Вывод
В этой статье мы углубились в основы использования строк в JavaScript, от создания и отображения строковых литералов с использованием одинарных и двойных кавычек, создания шаблонных литералов, конкатенации, экранирования и присвоения строковых значений переменным.
