Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Какие из этих пяти вариантов - строки?

2 <h2>Кавычки</h2>

3 Какие из этих пяти вариантов - строки? С первыми двумя все понятно: это точно строки, мы уже работали с подобными конструкциями. А что насчет остальных?

4 Любой одиночный символ в кавычках - это строка. Пустая строка '' - это тоже строка. То есть строкой мы считаем все, что находится внутри кавычек, даже если это пробел, один символ или вообще отсутствие символов.

5 Ранее в уроках мы записывали строки в одинарных кавычках, но это не единственный способ. Можно использовать и двойные:

6 Представьте, что вы хотите напечатать строчкуDragon's mother. Апостроф перед буквойs- это такой же символ, как одинарная кавычка. Попробуем:

7 Такая программа не будет работать. С точки зрения JavaScript, строка началась с одинарной кавычки, а потом закончилась после буквыn. Дальше были символы s mother без кавычек - значит, это не строка. А потом была одна открывающая строку кавычка, которая так и не закрылась: '). Этот код синтаксически некорректен (это видно даже по тому, как подсвечен код).

8 Здесь нам помогут двойные кавычки. Такой вариант программы отработает корректно:

9 Теперь интерпретатор знает, что строка началась с двойной кавычки - значит, и закончиться должна на двойной кавычке. А одинарная кавычка внутри стала частью строки.

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

11 А что, если мы хотим создать такую строку:

12 В ней есть и одинарные и двойные кавычки. Как быть в этой ситуации? Нужно каким-то образом сказать интерпретатору считать каждую кавычку частью строки, а не началом или концом строки.

13 Для этогоэкранируютспециальные символы. В нашем случае тот символ, который является признаком конца и начала строки, это либо одинарная кавычка, либо двойная, в зависимости от ситуации. Для экранирования используется обратный слеш \.

14 Посмотрите внимательно: нам нужно было добавить \ для двойных кавычек, но не для одинарной (апостроф), потому что сама строка создана с двойными кавычками. Если бы строка создавалась с одинарными кавычками, то символ экранирования нужен был бы перед апострофом, но не перед двойными кавычками:

15 А что, если нужно вывести сам обратный слеш? Точно так же, как и любой другой специальный символ, его надо экранировать самим собой.

16 Вопрос на самопроверку, что выведет этот код?

17 <h2>Экранирующие последовательности</h2>

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

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

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

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

22 Результат:

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

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

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

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

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

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

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

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

31 </li>

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

33 Здесь мы сначала выводим строку "перевод строки", а потом делаем вывод обыкновенной строки.

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

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

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

37 </li>

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

39 </li>

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

41 <h2>Конкатенация</h2>

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

43 Склеивание строк всегда происходит в том же порядке, в котором записаны операнды. Левый операнд становится левой частью строки, а правый - правой.

44 Вот еще несколько примеров:

45 Как видите, строки можно склеивать, даже если они записаны с разными кавычками.

46 В последнем примере название города получилось с ошибкой:King's Landingнужно писать через пробел. Но в наших начальных строках не было пробелов, а пробелы в самом коде слева и справа от символа + не имеют значения, потому что они не являются частью строк.

47 Выхода из этой ситуации два:

48 Пробел - такой же символ, как и другие. Чем больше пробелов, тем шире отступы: