Javascript операции со строками. Javascript: работа со строками, функции

14.07.2019

Объектно-ориентированные возможности и ассоциативные массивы JavaScript как семантические «каркасы» использования функций и конструкций для обработки строк представляют особенный интерес для программирования процессов обработки информации по её смысловому содержанию. На языке JavaScript функции работы со строками можно комбинировать в собственные смысловые конструкции, упрощая код и формализуя предметную область задачи.

В классическом варианте обработка информации — это, прежде всего, строковые функции. Каждая функция и конструкция языка имеет свои особенности в синтаксисе и семантике JavaScript. Методы работы со строками здесь имеют свой стиль, но в обычном применении это просто синтаксис в пределах простой семантики: поиск, замена, вставка, извлечение, контенкация, смена регистра…

Описание строковых переменных

Для объявления строки используется конструкция var. Можно сразу задать ее значение или формировать его в ходе исполнения алгоритма. Для строки можно использовать одинарные или двойные кавычки. Если в ней должна быть кавычка, её необходимо экранировать символом «».

Строка, обозначенная двойными кавычками, требует экранирования внутренних двойных кавычек. Аналогично та, что обозначена одинарными, критична к наличию внутри одинарных кавычек.

В данном примере в строке «str_dbl» перечислены полезные специальные символы, которые можно использовать в строке. При этом сам символ «» экранирован.

Строка — это всегда массив

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

  • str_isV => «V»;
  • str_chr => «’»;
  • str_dbl => «a».

То есть символы строки доступны как элементы массива, при этом каждый специальный символ — это один символ. Экранирование — это элемент синтакиса. В реальную строку никакой «экран» не помещается.

Использование функции charAt() дает аналогичный эффект:

  • str_isV.charAt(3) => «V»;
  • str_chr.charAt(1) => «’»;
  • str_dbl.charAt(5) => «a».

Программист может использовать любой вариант.

Основные строковые функции

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

Самый важный метод строки (правильнее — свойство) — её длина.

  • var xStr = str_isV.length + ‘/’ + str_chr.length + ‘/’ + str_dbl.length.

Результат: 11/12/175 по строкам приведенного выше описания.

Самая важная строчная пара функций — разделение строки на массив элементов и слияние массива в строку:

  • split(s [, l]);
  • join(s).

В первом случае строка разбивается по символу-разделителю «s» на массив элементов, в котором количество элементов не превышает значения «l». Если количество не задано, то разбивается вся строка.

Во втором случае массив элементов сливается в одну строку через заданный разделитель.

Примечательная особенность данной пары: разбиение можно производить по одному разделителю, а слияние — по другому. В этом контексте в JavaScript работа со строками может быть «выведена за пределы» синтаксиса языка.

Классические строчные функции

Обычные функции обработки строк:

  • поиск;
  • выборка;
  • замена;
  • преобразование.

Представлены методами: indexOf(), lastIndexOf(), substr(), substring(), toLowerCase(), toUpperCase(), concan(), charCodeAt() и другими.

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

Например, использование метода concat() допустимо, но проще написать:

  • str = str1 + str2 + str3;

Применение функции charAt() тоже имеет смысл, а вот применение charCodeAt() имеет реальное практическое значение. Аналогично, для JavaScript перенос строки имеет особенный смысл: в контексте вывода на экран, например, в сообщении alert() — это «n», в конструкции формирования контента страницы это «
». В первом случае это просто символ, а во втором — строка символов.

Строки и регулярные выражения

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

Метод match находит, а replace заменяет найденное совпадение нужным значением. Регулярные выражения реализованы в JavaScript на высоком уровне, по сути своей, являются сложными, а ввиду специфики применения переносят центр тяжести с сервера в браузер клиента.

При применении методов match, search и replace следует не только уделить должное внимание тестированию на всём спектре допустимых значений исходных параметров и искомых строк, но и оценить нагрузку на браузер.

Примеры регулярных выражений

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

Здесь представлены функции, которые проверяют, ввод содержит целое число (schInt) или число вещественное (schReal). Следующий пример показывает, насколько эффективно обрабатывать строки, проверяя их на наличие только допустимых символов: schText — только текст, schMail — правильный адрес электронной почты.

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

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

Объектно-ориентированные строки

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

Любое применение строчных функций предполагает обработку реального смысла, который определяется данными, областью применения, конкретным назначением алгоритма.

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

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

Есть общие алгоритмы, а есть частные. Например, фамилия или номер дома — это строки, но если в первом случае допустимы только русские буквы, то во втором случае допустимы цифры, русские буквы и могут встречаться дефисы или индексы через наклонную черту. Индексы могут быть буквенными или цифровыми. Дом может иметь корпуса.

Все ситуации не всегда можно предусмотреть. Это важный момент в программировании. Редкий алгоритм не требует доработки, а в большинстве случаев приходится систематически корректировать функционал.

Формализация обрабатываемой строчной информации в виде объекта улучшает читабельность кода, позволяет вывести его на уровень смысловой обработки. Это другая степень функциональности и значительно лучшее качество кода при большей надежности разработанного алгоритма.

Приветствую всех, кто основательно решил изучить прототипно-ориентированный язык. В прошлый я рассказал вам про , а сегодня мы будем разбирать строки JavaScript-а. Так как в этом языке все текстовые элементы являются строками (нет отдельного формата для символов), то вы можете сами догадаться, что этот раздел занимает значимую часть в изучении синтаксиса js.

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

Синтаксис строчных переменных

В языке js все переменные объявляются при помощи ключевого слова var, а далее в зависимости от формата оформления параметров определяется тип объявленной переменной. Как вы помните из , в JavaScript-е отсутствует строгая типизация. Именно поэтому в коде и обстоит вот такая ситуация.

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

Хочу уделить особое внимание третьему способу. Он обладает рядом преимуществ.

С его помощью можно спокойно осуществлять перенос строки и это будет выглядеть вот так:

alert (`несколько

переношу

А еще третий способ позволяет использовать конструкцию ${…}. Такой инструмент нужен для вставки интерполяции. Не пугайтесь, сейчас расскажу, что это такое.

Благодаря ${…} в строки можно вставлять не только значения переменных, а еще и выполнять с ними арифметические и логические операции, вызывать методы, функции и т.д. Все это называется одним терминов – интерполяция. Ознакомьтесь с примером реализации данного подхода.

1 2 3 var pen = 3; var pencil = 1; alert(`${pen} + ${pencil*5} = ${pen + pencil}`);

var pen = 3; var pencil = 1; alert(`${pen} + ${pencil*5} = ${pen + pencil}`);

В результате на экран выведется выражение: «3 + 1*5 = 8».

Что касается первых двух способов объявления строк, то в них разницы никакой нет.

Поговорим немного о специальных символах

Во многих языках программирования есть специальные символы, которые помогают управлять текстом в строках. Самый известный среди них – это перенос строки (\n) .

Все аналогичные инструменты изначально начинаются с обратного слеша (\) и после идут буквы английского алфавита.

Ниже я прикрепил небольшую табличку, в которой перечислены некоторые специальные символы.

Запасаемся тяжелым арсеналом методов и свойств

Разработчиками языка было предусмотрено множество методов и свойств для упрощения и оптимизации работы со строками. А с выпуском в свет нового стандарта под названием ES-2015 в прошлом году, этот список пополнился новенькими инструментами.

Length

Начну с самого популярного свойства, которое помогает узнать длину значений строчных переменных. Это length . Он используется таким образом:

var string = «Единороги»;

alert (string.length);

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

«Единороги».length;

Результат не изменится.

charAt ()

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

var string = «Единороги»;

alert (string.charAt (0));.

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

От toLowerCase () к toUpperCase ()

Данные методы управляют регистром символов. При написании кода «Контент».

toUpperCase () все слово будет отображено заглавными буквами.

Для противоположного эффекта стоит использовать «Контент». toLowerCase () .

indexOf ()

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

1 2 3 4 var text = "Организовать поиск цветов!"; alert(text.indexOf("цвет")); //19 alert(text.indexOf(" ")); //12 alert(text.lastIndexOf(" ")); //18

var text = "Организовать поиск цветов!"; alert(text.indexOf("цвет")); //19 alert(text.indexOf(" ")); //12 alert(text.lastIndexOf(" ")); //18

Заметьте, lastIndexOf () выполняет те же действия, только поиск осуществляется с конца предложения.

Извлечение подстрок

Для этого действия в js было создано три примерно одинаковых метода.

Разберем сначала substring (start, end) и slice (start, end) . Работают одинаково. Первый аргумент определяет начальную позицию, с которой будет начинаться извлечение, а второй отвечает за конечный пункт остановки. В обоих методах строка извлекается, не включая символ, который расположен на позиции end.

var text = "Атмосфера"; alert(text.substring(4)); // выведет «сфера» alert(text.substring(2, 5)); //отобразит «мос» alert(text.slice(2, 5)); //отобразит «мос»

А теперь разберем третий метод, который называется substr () . В нем также нужно прописывать 2 аргумента: start и length .

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

var text = «Атмосфера»;

alert (text.substr (2, 5)); //отобразит «мосфе»

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

Replase ()

Данный метод помогает заменить символы и подстроки в тексте. С его помощью можно также реализовывать и глобальные замены, но для этого нужно включать регулярные выражения.

В этом примере заменится подстрока только в первом слове.

var text = "Атмосфера Атмосфера"; var newText = text.replace("Атмо","Страто") alert(newText) // Результат: Стратосфера Атмостфера

А в этой программной реализации из-за флага регулярного выражения “g” будет выполнена глобальная замена.

var text = "Атмосфера Атмосфера"; var newText = text.replace(/Атмо/g,"Страто") alert(newText) // Результат: Стратосфера Стратосфера

Займемся конвертацией

В JavaScript предусмотрено только три вида преобразования типов объектов:

  1. Числовое;
  2. Строковое;
  3. Логическое.

В текущей публикации я расскажу про 2 из них, так как знание о них нужнее для работы со строками.

Числовое преобразование

Чтобы значение элемента явно преобразовать к числовому виду, можно использовать Number (value) .

Есть и более короткое выражение: +«999» .

var a = Number («999»);

Строковая конвертация

Выполняется функцией alert , а также явным вызовом String (text) .

1 2 3 alert (999+ " super price") var text = String(999) alert(text === "999");

alert (999+ " super price") var text = String(999) alert(text === "999");

На этой ноте я решил закончит свою работу. Подписывайтесь на мой блог и не забывайте делиться ссылкой на него со своими друзьями. Желаю удачи в обучении. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 130 раз

Как семантические «каркасы» использования функций и конструкций для обработки строк представляют особенный интерес для программирования процессов обработки информации по её смысловому содержанию. На языке JavaScript функции работы со строками можно комбинировать в собственные смысловые конструкции, упрощая код и формализуя предметную область задачи.

В классическом варианте обработка информации - это, прежде всего, строковые функции. Каждая функция и конструкция языка имеет свои особенности в синтаксисе и семантике JavaScript. Методы работы со строками здесь имеют свой стиль, но в обычном применении это просто синтаксис в пределах простой семантики: поиск, замена, вставка, извлечение, контенкация, смена регистра...

Описание строковых переменных

Для объявления строки используется конструкция var. Можно сразу задать ее значение или формировать его в ходе исполнения алгоритма. Для строки можно использовать одинарные или двойные кавычки. Если в ней должна быть кавычка, её необходимо экранировать символом «\».

Строка, обозначенная требует экранирования внутренних двойных кавычек. Аналогично та, что обозначена одинарными, критична к наличию внутри одинарных кавычек.

В данном примере в строке «str_dbl» перечислены полезные специальные символы, которые можно использовать в строке. При этом сам символ «\» экранирован.

Строка - это всегда массив

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

  • str_isV => «V»;
  • str_chr => «"»;
  • str_dbl => «a».

То есть символы строки доступны как элементы массива, при этом каждый специальный символ - это один символ. Экранирование - это элемент синтакиса. В реальную строку никакой «экран» не помещается.

Использование функции charAt() дает аналогичный эффект:

  • str_isV.charAt(3) => «V»;
  • str_chr.charAt(1) => «"»;
  • str_dbl.charAt(5) => «a».

Программист может использовать любой вариант.

Основные строковые функции

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

Самый важный метод строки (правильнее - свойство) - её длина.

  • var xStr = str_isV.length + "/" + str_chr.length + "/" + str_dbl.length.

Результат: 11/12/175 по строкам приведенного выше описания.

Самая важная строчная пара функций - разделение строки на массив элементов и слияние массива в строку:

  • split(s [, l]);
  • join(s).

В первом случае строка разбивается по символу-разделителю «s» на массив элементов, в котором количество элементов не превышает значения «l». Если количество не задано, то разбивается вся строка.

Во втором случае массив элементов сливается в одну строку через заданный разделитель.

Примечательная особенность данной пары: разбиение можно производить по одному разделителю, а слияние - по другому. В этом контексте в JavaScript работа со строками может быть «выведена за пределы» синтаксиса языка.

Классические строчные функции

Обычные функции обработки строк:

  • поиск;
  • выборка;
  • замена;
  • преобразование.

Представлены методами: indexOf(), lastIndexOf(), toLowerCase(), toUpperCase(), concan(), charCodeAt() и другими.

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

Например, использование метода concat() допустимо, но проще написать:

  • str = str1 + str2 + str3;

Применение функции charAt() тоже имеет смысл, а вот применение charCodeAt() имеет реальное практическое значение. Аналогично, для JavaScript перенос строки имеет особенный смысл: в контексте вывода на экран, например, в сообщении alert() - это «\n», в конструкции формирования контента страницы это «
». В первом случае это просто символ, а во втором - строка символов.

Строки и регулярные выражения

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

Метод match находит, а replace заменяет найденное совпадение нужным значением. Регулярные выражения реализованы в JavaScript на высоком уровне, по сути своей, являются сложными, а ввиду специфики применения переносят центр тяжести с сервера в браузер клиента.

При применении методов match, search и replace следует не только уделить должное внимание тестированию на всём спектре допустимых значений исходных параметров и искомых строк, но и оценить нагрузку на браузер.

Примеры регулярных выражений

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

Здесь представлены функции, которые проверяют, ввод содержит целое число (schInt) или число вещественное (schReal). Следующий пример показывает, насколько эффективно обрабатывать строки, проверяя их на наличие только допустимых символов: schText - только текст, schMail - правильный адрес электронной почты.

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

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

Объектно-ориентированные строки

В 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 favePoem = "My favorite poem is " + poem + " by " + author ".";

Новые строки, полученные в результате конкатенации, можно использовать в программе.

Переменные с шаблонными литералами

Одной из особенностей шаблонных литералов является возможность включения в строку выражений и переменных. Вместо конкатенации можно использовать синтаксис $ {} для вставки переменной.

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:
Похожие статьи