Символьные литералы помогают форматировать строки в JavaScript.
Мы рассмотрим простые escape-символы, которые помогут вам выполнить небольшие задачи форматирования, такие как добавление новой строки в JavaScript в полное руководство по всем доступным escape-символам. Помимо символа новой строки, мы также рассмотрим различные другие escape-символы в JavaScript и то, как они могут помочь вам форматировать ваши строки различными способами. До конца я обещаю, что вы будете знать гораздо больше escape-символов, чем просто символ новой строки в JavaScript.
Поскольку мы будем рассматривать некоторые строковые символьные литералы, давайте объявим две переменные, содержащие строковые значения, чтобы понять, как работают символьные литералы.
/* Declare variables holding some strings */ let intro = "My name is John Doe"; let fathersName = "My father's name is Mark Doe";
Экранирование двойных кавычек в JavaScript
Предположим, что я хочу по какой-то причине заключить имя Джона Доу в двойные кавычки. Прежде чем мы это сделаем, позвольте мне добавить prettier ignore, чтобы prettier не форматировал мой код автоматически. Теперь попробуем добавить двойные кавычки. Видите ли, в тот момент, когда я добавляю John Doe в двойные кавычки, моя IDE начинает кричать на меня, потому что это синтаксическая ошибка. Если присмотреться, то поймешь, почему так. Теперь первая двойная кавычка начинается до My и заканчивается после is. Вторая пара двойных кавычек для JavaScript начинается после Doe и там же заканчивается. Теперь John Doe становится выражением, которое не распознается JavaScript и, следовательно, эта ошибка. Здесь мы можем использовать наш первый символьный литерал. В Javascript символьные литералы используют escape-символ ‘’, который представляет собой обратную косую черту, за которой следует символ, который вы хотите рассматривать как строковое значение в JavaScript, поэтому в нашем случае это двойная кавычка. Давайте закончим это второй двойной кавычкой здесь. Позвольте мне вывести результат на консоль, чтобы посмотреть, что мы получим. Мы действительно добавили двойные кавычки так, как хотели.
/* Declare variables holding some strings */ let intro = "My name is \"John Doe\""; console.log ( intro ) // Output -> My name is "John Doe"
Экранирование одинарных кавычек в JavaScript
Давайте посмотрим на другой сейчас. В нашей второй строке здесь я преобразую ее в одинарные кавычки для нашего примера, и это совершенно допустимый синтаксис для строк в одинарных кавычках. JavaScript не делает различий между ними. В тот момент, когда я это делаю, вы видите, я начинаю получать синтаксическую ошибку. Давайте посмотрим поближе, чтобы увидеть, что происходит. Согласно JavaScript, теперь мое первое строковое значение начинается с My и заканчивается перед s здесь, а затем еще одно начинается после слова Doe, которое никогда не заканчивается. Javascript не может распознать это выражение целиком, поэтому моя IDE выдает синтаксическую ошибку. Таким же образом мы сделали это с двойными кавычками. Мы можем добавить escape-символ перед одинарной кавычкой перед S. Это наш второй символьный литерал, в котором мы можем избежать одинарных кавычек, добавив обратную косую черту или escape-символ. Я выведу значение в консоль, чтобы увидеть, правильно ли его понимает JavaScript. Безусловно, это работает.
// prettier-ignore let fathersName = 'My father\'s name is Mark Doe'; console.log ( fathersName ); // Output -> My father's name is Mark Doe
Добавление новой строки в строки в JavaScript
Хорошо, давайте посмотрим на другой здесь. Для этого позвольте мне скопировать нашу переменную intro, создать другую переменную, назвать ее intro2 и удалить эти двойные кавычки. Прохладный! Теперь предположим, что я по какой-то причине хочу добавить обратную косую черту в конце имени Джона Доу. Давайте добавим обратную косую черту и выведем ее в консоль, чтобы посмотреть, что мы получим.
let intro2 = 'My name is John Doe \ '; console.log ( intro2 )
Здесь мы получаем строку без обратной косой черты, а JavaScript проигнорировал ту, которую мы добавили. Это связано с тем, что escape-символ сам по себе не имеет значения и игнорируется JavaScript. JavaScript не понимает нашего намерения напечатать обратную косую черту. Поэтому нам нужно будет добавить еще одну обратную косую черту после первой. Теперь вы видите, что мы получаем желаемый результат.
let intro2 = 'My name is John Doe \\ '; console.log ( intro2 )
Конкатенация и символ новой строки в JavaScript
Предположим, что мы хотели напечатать эти два предложения вместе, но в двух разных строках. Я создам еще одну переменную, чтобы предыдущая была доступна для ваших записей. Я попытаюсь объединить их и посмотреть, что мы получим. Видите ли, мы соединили два предложения, но не разделили их на две отдельные строки. Для этого мы можем использовать литерал символа новой строки. Давайте добавим escape-символ, за которым следует \n. Это создает новую строку. Синтаксис объявления строки в JavaScript, известный как литералы шаблона, делает создание многострочных строк еще проще.
let intro3 = 'My name is John Doe \n'; console.log ( intro3 + fathersName ); // \n - for adding a new line
Неиспользуемые символьные литералы в JavaScript
Есть еще несколько символьных литералов, доступных в JavaScript. Позвольте мне добавить их здесь, в комментариях. Стоит отметить, что я не рассматриваю их в этом руководстве, потому что они не поддерживаются некоторыми браузерами и не актуальны для Интернета. Они были созданы для электронных пишущих машинок, факсимильных аппаратов и т. д. Но вы можете обратиться к ним и посмотреть, что они делают; всегда полезно знать, что вы можете делать с помощью JavaScript.
/* * \b Backspace * \f Form Feed * \n New Line * \r Carriage Return * \t Horizontal Tabulator * \v Vertical Tabulator * */
P.S. Я расскажу обо всех хороших и плохих сторонах JavaScript в серии мастер-классов по JavaScript. Пожалуйста, подпишитесь на Cloudaffle и включите уведомления, чтобы получать оповещения о новых видео, которые я продолжаю публиковать. Если у вас есть какие-либо вопросы или предложения, пожалуйста, не стесняйтесь оставлять их в комментариях ниже, и я постараюсь ответить на них для вас. Увидимся в следующем видео. До тех пор, ура!
Получите доступ к большему количеству таких историй на Cloudaffle
Спасибо за чтение, и, надеюсь, это было полезно!
Я публикую статьи о веб-разработке каждую неделю, рассмотрите возможность ввести свой адрес электронной почты здесь, если вы хотите подписаться на мой еженедельный список рассылки, или подпишитесь на меня в Twitter .
