Работа со строками в 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.");
This is a string in the console.

Другим простым способом запросить значение строки является всплывающее окно в браузере, которое можно вызвать с помощью alert():

alert("This is a string in an 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";
Seahorse

Конкатенация объединяет конец одной строки с началом другой строки, не вставляя пробелов. Чтобы между строками был пробел, его нужно добавить в конец первой строки.

"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

Строковый литерал – это строка, как она выглядит в исходном коде, включая кавычки. Строковое значение – это строка, которая появляется в выводе (без кавычек).

В данном примере «Beyond the Sea» – это строковый литерал, а Beyond the Sea – строковое значение.

Обход кавычек и апострофов в строках

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

Рассмотрим такой пример:

const brokenString = 'I'm a broken string';
console.log(brokenString);
unknown: Unexpected token (1:24)

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

Чтобы избежать подобных ошибок, можно использовать:

  • Другой синтаксис строк.
  • Escape-символы.
  • Шаблонный литерал.

Альтернативный синтаксис строк

Проще всего обойти эту проблему с помощью синтаксиса, обратного тому, который вы используете в сценарии. Например, строки с апострофами брать в двойные кавычки:

"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 or \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.";

Примечание: Этот метод использовать не рекомендуется, так как это может вызвать проблемы в некоторых браузерах.

Чтобы сделать код удобочитаемым, используйте шаблонные литералы. Это позволяет исключить конкатенацию и escape-символы.

const threeLines = `This is a string
that spans across
three lines.`;
This is a string
that spans across
three lines.

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

Заключение

Теперь вы знаете основные принципы работы со строками в JavaScript,умеете создавать строки и шаблонные литералы, выполнять конкатенацию и обход и присваивать строки переменным.

Tags: