Logo
Книга для начинающих
ВходРегистрация
/
Программирование
/
Курс JavaScript
/

Экранирующие последовательности

JavaScript: Экранирующие последовательности

Мы хотим показать диалог Матери Драконов со своим ребёнком:

- Are you hungry? - Aaaarrrgh!

Если вывести на экран строку с таким текстом:

console.log('- Are you hungry?- Aaaarrrgh!');

то получится так:

- Are you hungry?- Aaaarrrgh!

Не то, что мы хотели. Строки расположены друг за другом, а не одна ниже другой. Нам нужно как-то сказать интерпретатору «нажать на энтер» — сделать перевод строки после вопросительного знака. Это можно сделать, используя символ перевода строки: \n.

console.log('- Are you hungry?\n- Aaaarrrgh!');

результат:

- Are you hungry? - Aaaarrrgh!

\n — это специальный символ. В литературе его часто обозначают как LF (Line Feed). Возможно вы сейчас подумали, что это опечатка, ведь здесь мы видим два символа \ и n, но это не так. С точки зрения компьютера — это один невидимый символ перевода строки. Доказательство:

// Мы это не изучали, но вы должны знать правду
// Ниже код, который возвращает длину строки
'a'.length;    // 1
'\n'.length;   // 1 !!!
'\n\n'.length; // 2 !!!

Почему так сделано? \n — всего лишь способ записать символ перевода строки, но сам перевод строки по своему смыслу – это один символ, правда, невидимый. Именно поэтому и возникла такая задача. Нужно было как-то представить его на клавиатуре. А поскольку количество знаков на клавиатуре ограничено и отдано под самые важные, то все специальные символы реализуются в виде таких обозначений.

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

- Привет!¶ - О, привет!¶ - Как дела?

Устройство, которое выводит соответствующий текст, учитывает этот символ. Например, принтер при встрече с LF протаскивает бумагу вверх на одну строку, а текстовый редактор переносит весь последующий текст ниже, также на одну строку.

\n — это пример экранирующей последовательности (escape sequence). Их ещё называют управляющими конструкциями. Хотя таких символов не один десяток, в программировании часто встречаются всего несколько. Кроме перевода строки, к таким символам относятся табуляция (разрыв, получаемый при нажатии на кнопку Tab) и возврат каретки (только в Windows). Нам, программистам, часто нужно использовать перевод строки \n для правильного форматирования текста.

console.log('Gregor Clegane\nDunsen\nPolliver\nChiswyck');

На экран выведется:

Gregor Clegane Dunsen Polliver Chiswyck

Обратите внимание на следующие моменты:

  1. Не имеет значения, что стоит перед или после \n: символ или пустая строка. Перевод будет обнаружен и выполнен в любом случае.

  2. Помните, что строка может содержать один символ или вообще ноль символов. А еще строка может содержать только \n. Проанализируйте следующий пример:

    console.log('\n');
    console.log('Dunsen');

    Здесь мы сначала выводим строку «перевод строки», а потом делаем вывод обыкновенной строки. Программа выведет на экран:


    Dunsen

    Почему перед строкой Dunsen появилось две пустые строки, а не одна? Дело в том, что console.log() при выводе значения автоматически добавляет в конец символ перевода строки. Таким образом, один перевод строки мы указали явно, передав этот символ экранирующей последовательности аргументом в функцию, а второй перевод строки добавлен самой функцией автоматически.

    Ещё пример кода:

    console.log('Polliver');
    console.log('Gregor Clegane');
    console.log();
    console.log('Chiswyck');
    console.log('\n');
    console.log('Dunsen');

    Вывод будет таким:

    Polliver Gregor Clegane
    Chiswyck
    Dunsen

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

  3. Если нам понадобится вывести \n именно как текст (два отдельных печатных символа), то можно воспользоваться уже известным нам способом экранирования, добавив еще один \ в начале. То есть последовательность \\n отобразится как символы \ и n, идущие друг за другом.

console.log('Joffrey loves using \\n');

на экран выйдет:

Joffrey loves using \n

Небольшое, но важное замечание про Windows. В Windows для перевода строк по умолчанию используется \r\n. Такая комбинация хорошо работает только в Windows, но создаёт проблемы при переносе в другие системы (например, когда в команде разработчиков есть пользователи как Windows, так и Linux). Дело в том, что последовательность \r\n имеет разную трактовку в зависимости от выбранной кодировки (рассматривается позже). По этой причине, в среде разработчиков принято всегда использовать \n без \r, так как LF всегда трактуется одинаково и отлично работает в любой системе. Не забудьте настроить ваш редактор на использование \n.

Задание

Напишите программу, которая выводит на экран:

- Did Joffrey agree? - He did. He also said "I love using \n".

При этом программа использует только один console.log(), но результат на экране должен выглядеть в точности, как показано выше.

Коммерческий опыт и Трудоустройство

Полезное

  • История перевода строки

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник":

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

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

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

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном телеграм-сообществе

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

  1. Привет, Мир!
  2. Комментарии
  3. Инструкции (Statements)
  4. Как мы проверяем ваши решения
  5. Синтаксические ошибки
  6. Арифметические операции
  7. Операторы
  8. Коммутативная операция
  9. Композиция операций
  10. Приоритет операций
  11. Числа с плавающей точкой
  12. Бесконечность (Infinity)
  13. NaN
  14. Линтер
  15. Кавычки
  16. Экранирующие последовательности
  17. Конкатенация
  18. Кодировка
  19. Что такое переменная
  20. Изменение переменной
  21. Выбор имени переменной
  22. Ошибки при работе с переменными
  23. Выражения в определениях
  24. Переменные и конкатенация
  25. Стили именования
  26. Магические числа
  27. Константы
  28. Интерполяция
  29. Извлечение символов из строки
  30. Типы данных
  31. undefined
  32. Неизменяемость примитивных типов
  33. Слабая типизация
  34. Функции и их вызов
  35. Математические функции JavaScript
  36. Сигнатура функции
  37. Параметры по умолчанию
  38. Вызов функции — выражение
  39. Функции с переменным числом параметров
  40. Детерминированность
  41. Стандартная библиотека
  42. Свойства
  43. Методы
  44. Неизменяемость
  45. Свойства и методы как выражения
  46. Цепочка вызовов
  47. Создание (определение) функций
  48. Возврат значений
  49. Параметры функций
  50. Необязательные параметры функций
  51. Упрощенный синтаксис функций
  52. Логический тип
  53. Предикаты
  54. Комбинирование логических операций
  55. Логические операторы
  56. Отрицание
  57. Результат логических выражений
  58. Условная конструкция (if)
  59. else
  60. Конструкция else if
  61. Тернарный оператор
  62. Конструкция Switch
  63. Цикл While
  64. Агрегация данных (Числа)
  65. Агрегация данных (Строки)
  66. Обход строк
  67. Условия внутри тела цикла
  68. Формирование строк в циклах
  69. Синтаксический сахар
  70. Инкремент и декремент
  71. Возврат из циклов
  72. Цикл For
/
Программирование
/
Курс JavaScript
/

Экранирующие последовательности

JavaScript: Экранирующие последовательности

Мы хотим показать диалог Матери Драконов со своим ребёнком:

- Are you hungry? - Aaaarrrgh!

Если вывести на экран строку с таким текстом:

console.log('- Are you hungry?- Aaaarrrgh!');

то получится так:

- Are you hungry?- Aaaarrrgh!

Не то, что мы хотели. Строки расположены друг за другом, а не одна ниже другой. Нам нужно как-то сказать интерпретатору «нажать на энтер» — сделать перевод строки после вопросительного знака. Это можно сделать, используя символ перевода строки: \n.

console.log('- Are you hungry?\n- Aaaarrrgh!');

результат:

- Are you hungry? - Aaaarrrgh!

\n — это специальный символ. В литературе его часто обозначают как LF (Line Feed). Возможно вы сейчас подумали, что это опечатка, ведь здесь мы видим два символа \ и n, но это не так. С точки зрения компьютера — это один невидимый символ перевода строки. Доказательство:

// Мы это не изучали, но вы должны знать правду
// Ниже код, который возвращает длину строки
'a'.length;    // 1
'\n'.length;   // 1 !!!
'\n\n'.length; // 2 !!!

Почему так сделано? \n — всего лишь способ записать символ перевода строки, но сам перевод строки по своему смыслу – это один символ, правда, невидимый. Именно поэтому и возникла такая задача. Нужно было как-то представить его на клавиатуре. А поскольку количество знаков на клавиатуре ограничено и отдано под самые важные, то все специальные символы реализуются в виде таких обозначений.

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

- Привет!¶ - О, привет!¶ - Как дела?

Устройство, которое выводит соответствующий текст, учитывает этот символ. Например, принтер при встрече с LF протаскивает бумагу вверх на одну строку, а текстовый редактор переносит весь последующий текст ниже, также на одну строку.

\n — это пример экранирующей последовательности (escape sequence). Их ещё называют управляющими конструкциями. Хотя таких символов не один десяток, в программировании часто встречаются всего несколько. Кроме перевода строки, к таким символам относятся табуляция (разрыв, получаемый при нажатии на кнопку Tab) и возврат каретки (только в Windows). Нам, программистам, часто нужно использовать перевод строки \n для правильного форматирования текста.

console.log('Gregor Clegane\nDunsen\nPolliver\nChiswyck');

На экран выведется:

Gregor Clegane Dunsen Polliver Chiswyck

Обратите внимание на следующие моменты:

  1. Не имеет значения, что стоит перед или после \n: символ или пустая строка. Перевод будет обнаружен и выполнен в любом случае.

  2. Помните, что строка может содержать один символ или вообще ноль символов. А еще строка может содержать только \n. Проанализируйте следующий пример:

    console.log('\n');
    console.log('Dunsen');

    Здесь мы сначала выводим строку «перевод строки», а потом делаем вывод обыкновенной строки. Программа выведет на экран:


    Dunsen

    Почему перед строкой Dunsen появилось две пустые строки, а не одна? Дело в том, что console.log() при выводе значения автоматически добавляет в конец символ перевода строки. Таким образом, один перевод строки мы указали явно, передав этот символ экранирующей последовательности аргументом в функцию, а второй перевод строки добавлен самой функцией автоматически.

    Ещё пример кода:

    console.log('Polliver');
    console.log('Gregor Clegane');
    console.log();
    console.log('Chiswyck');
    console.log('\n');
    console.log('Dunsen');

    Вывод будет таким:

    Polliver Gregor Clegane
    Chiswyck
    Dunsen

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

  3. Если нам понадобится вывести \n именно как текст (два отдельных печатных символа), то можно воспользоваться уже известным нам способом экранирования, добавив еще один \ в начале. То есть последовательность \\n отобразится как символы \ и n, идущие друг за другом.

console.log('Joffrey loves using \\n');

на экран выйдет:

Joffrey loves using \n

Небольшое, но важное замечание про Windows. В Windows для перевода строк по умолчанию используется \r\n. Такая комбинация хорошо работает только в Windows, но создаёт проблемы при переносе в другие системы (например, когда в команде разработчиков есть пользователи как Windows, так и Linux). Дело в том, что последовательность \r\n имеет разную трактовку в зависимости от выбранной кодировки (рассматривается позже). По этой причине, в среде разработчиков принято всегда использовать \n без \r, так как LF всегда трактуется одинаково и отлично работает в любой системе. Не забудьте настроить ваш редактор на использование \n.

Задание

Напишите программу, которая выводит на экран:

- Did Joffrey agree? - He did. He also said "I love using \n".

При этом программа использует только один console.log(), но результат на экране должен выглядеть в точности, как показано выше.

Коммерческий опыт и Трудоустройство

Полезное

  • История перевода строки

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник":

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

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

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

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются
← ПредыдущийСледующий →
Loading...
← ПредыдущийСледующий →
← ПредыдущийСледующий →

Ваше упражнение проверяется по этим тестам

// @ts-check

import { expect, test, vi } from 'vitest'

test('hello world', async () => {
  const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => { });
  await import('./index.js')

  const firstArg = consoleLogSpy.mock.calls.join('\n');

  expect(firstArg).toBe('- Did Joffrey agree?\n- He did. He also said "I love using \\n".')
})
← ПредыдущийСледующий →

Решение учителя откроется через:

20:00

waiting_clock
← ПредыдущийСледующий →