Как работать со строками в JavaScript
Введение
Строка — это последовательность из одного или нескольких символов, которая может состоять из букв, цифр или символов. Строки в 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.");
OutputThis 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);
Это выведет строковое значение.
OutputThis is a string assigned to a variable.
Используя переменные вместо строк, нам не нужно повторно вводить строку каждый раз, когда мы хотим ее использовать, что упрощает нам работу со строками и манипулирование ими в наших программах.
Конкатенация строк
Конкатенация означает объединение двух или более строк вместе для создания новой строки. Для конкатенации мы используем оператор конкатенации, представленный символом +. Символ + также является оператором сложения при использовании с арифметическими операциями.
Давайте создадим простой пример конкатенации между Sea и лошадью.
"Sea" + "horse";
OutputSeahorse
Конкатенация соединяет строки от начала до конца, объединяя их и выводя новое строковое значение. Если бы мы хотели, чтобы между словами Sea и horse был пробел, нам нужно было бы включить символ пробела в одну из строк:
"Sea " + "horse";
OutputSea horse
Мы соединяем строки и переменные, содержащие строковые значения, с помощью конкатенации.
const poem = "The Wide Ocean";
const author = "Pablo Neruda";
const favePoem = "My favorite poem is " + poem + " by " + author + ".";
OutputMy 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}.`;
OutputMy favorite poem is The Wide Ocean by Pablo Neruda.
Как мы видим, включение выражений в литералы шаблонов — это еще один способ добиться того же результата. В этом случае использование шаблонных литералов может быть проще в написании и более удобным.
Строковые литералы и строковые значения
Вы могли заметить, что строки, которые мы пишем в исходном коде, заключены в кавычки или обратные кавычки, но фактический вывод не включает никаких кавычек.
"Beyond the Sea";
OutputBeyond the Sea
Существует различие при обращении к каждому из них. Строковый литерал — это строка, записанная в исходном коде, включая кавычки. Строковое значение — это то, что мы видим на выходе, и оно не включает кавычки.
В приведенном выше примере Beyond the Sea — это строковый литерал, а Beyond the Sea — строковое значение.
Экранирование кавычек и апострофов в строках
В связи с тем, что для обозначения строк используются кавычки, при использовании апострофов и кавычек в строках необходимо соблюдать особые меры. Попытка использовать апостроф в середине строки в одинарных кавычках, например, завершит строку, и JavaScript попытается проанализировать остальную часть предполагаемой строки как код.
Мы можем увидеть это, попытавшись использовать апостроф в сокращении Im ниже:
const brokenString = 'I'm a broken string';
console.log(brokenString);
Outputunknown: 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.`;
В дополнение к предотвращению необходимости экранирования символов и разрешению встроенных выражений литералы шаблонов также обеспечивают многострочную поддержку, которую мы обсудим в следующем разделе.
При чередующемся синтаксисе строк, использовании escape-символов и использовании литералов шаблонов существует несколько способов безопасного создания строки.
Длинные строки и новые строки
Иногда вам может понадобиться вставить в строку символ новой строки или возврат каретки. Экранирующие символы \n или \r можно использовать для вставки новой строки в вывод кода.
const threeLines = "This is a string\nthat spans across\nthree lines.";
OutputThis is a string
that spans across
three lines.
Технически это работает, чтобы вывести наш вывод на несколько строк. Однако запись очень длинной строки в одной строке быстро станет очень сложной для чтения и работы. Мы можем использовать оператор конкатенации, чтобы отобразить строку на нескольких строках.
const threeLines = "This is a string\n" +
"that spans across\n" +
"three lines.";
Вместо объединения нескольких строк мы можем использовать управляющий символ \ для выхода из новой строки.
const threeLines = "This is a string\n\
that spans across\n\
three lines.";
Примечание. Этот метод не является предпочтительным, так как может вызвать проблемы с некоторыми браузерами и минификаторами.
Чтобы сделать код более читабельным, мы можем вместо этого использовать литеральные строки шаблона. Это устраняет необходимость конкатенации или экранирования длинных строк, содержащих символы новой строки. Строка, а также символы новой строки будут сохранены.
const threeLines = `This is a string
that spans across
three lines.`;
OutputThis is a string
that spans across
three lines.
Важно знать обо всех способах создания новых строк и строк, занимающих несколько строк, поскольку разные кодовые базы могут использовать разные стандарты.
Заключение
В этой статье мы рассмотрели основы работы со строками в JavaScript, от создания и отображения строковых литералов с использованием одинарных и двойных кавычек, создания шаблонных литералов, конкатенации, экранирования и присвоения строковых значений переменным.