TOC

Как работать со строками в JavaScript

Вступление

  • Строка * - это последовательность из одного или нескольких символов, которая может состоять из букв, цифр или символов. Строки в JavaScript являются примитивными типами data и неизменяемыми, что означает, что они неизменны.

Поскольку строки - это способ отображения и работы с текстом, а текст - наш основной способ общения и понимания с помощью компьютеров, строки - это одна из самых фундаментальных концепций программирования, с которой нужно ознакомиться.

В этой статье мы узнаем, как создавать и просматривать выходные данные строк, как объединять строки, как хранить строки в переменных, а также правила использования кавычек, апострофов и новых строк в строках в JavaScript.

Создание и просмотр вывода строк

В JavaScript есть три способа написания строки - они могут быть записаны в одинарных кавычках (+ '' +), двойных кавычках (" ") или обратных галочках (+ \ \ + ). Тип используемой кавычки должен совпадать с обеих сторон, однако возможно, что все три стиля могут использоваться в одном и том же сценарии.

Строки, использующие двойные и одинарные кавычки, фактически одинаковы. Поскольку не существует соглашений или официальных предпочтений для строк с одинарными или двойными кавычками, все, что имеет значение, - это согласованность в файлах программы проекта.

'This string uses single quotes.';
"This string uses double quotes.";

Третий и новейший способ создания строки называется * шаблонным литералом *. Шаблонные литералы используют backtick (также известный как серьезный акцент) и работают так же, как обычные строки с несколькими дополнительными бонусами, о которых мы расскажем в этой статье.

`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.");

Выполнение строки выше приведет к следующему выводу в пользовательском интерфейсе браузера:

изображение: https: //assets.digitalocean.com/articles/eng_javascript/js-strings/js-alert-string-output.png [Вывод строки предупреждения JavaScript]

+ 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.

Используя переменные для замены строк, нам не нужно повторно вводить строку каждый раз, когда мы хотим ее использовать, что упрощает нам работу со строками в наших программах и манипулирование ими.

Конкатенация строк

  • Конкатенация * означает объединение двух или более строк вместе для создания новой строки. Для конкатенации мы используем оператор конкатенации, представленный символом . Символ `` также является оператором addition, когда используется с арифметическими операциями.

Давайте создадим простой пример объединения между " Sea " и " horse ".

"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 попытается проанализировать оставшуюся часть предполагаемой строки как код.

Мы можем убедиться в этом, попытавшись использовать апостроф в сокращении + I’m + ниже:

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 (+ \ +)

Мы можем использовать 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.`;

В дополнение к предотвращению необходимости экранирования символов и разрешению встроенных выражений литералы шаблонов также обеспечивают многострочную поддержку, что мы обсудим в https://www.digitalocean.com/community/tutorials/how-to-work- with-strings-in-javascript # long-strings-and-newlines [следующий раздел].

С помощью чередующегося синтаксиса строки, использования 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.";

Вместо объединения нескольких строк мы можем использовать 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.`;
OutputThis is a string
that spans across
three lines.

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

Заключение

В этой статье мы рассмотрели основы работы со строками в JavaScript: от создания и отображения строковых литералов с использованием одинарных и двойных кавычек, создания шаблонных литералов, конкатенации, экранирования и присвоения строковых значений переменным.

Related