Как использовать строки в JavaScript

12 set 2022 5 min di lettura
Как использовать строки в JavaScript
Indice dei contenuti

Введение

Строка — это последовательность из одного или нескольких символов, которая может состоять из букв, цифр или символов. Строки в 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, от создания и отображения строковых литералов с использованием одинарных и двойных кавычек, создания шаблонных литералов, конкатенации, экранирования и присвоения строковых значений переменным.

Buy me a coffeeBuy me a coffee

Supportaci se ti piacciono i nostri contenuti. Grazie.

Successivamente, completa il checkout per l'accesso completo a Noviello.it.
Bentornato! Accesso eseguito correttamente.
Ti sei abbonato con successo a Noviello.it.
Successo! Il tuo account è completamente attivato, ora hai accesso a tutti i contenuti.
Operazione riuscita. Le tue informazioni di fatturazione sono state aggiornate.
La tua fatturazione non è stata aggiornata.