Делай перенос строки в javascript по правилам, без ошибок в коде

Доброго времени суток, гости блога и верные подписчики. Сегодняшняя статья посвящена разбору простенькой, но полезной темы, а именно «Перенос строки в JavaScript». Вроде кажется, что в данном вопросе не могут возникнуть какие-либо проблемы. Однако это не так. Из-за привередливости и особенностей некоторых инструментов языка JS перенос текста может выполнятся по-разному.

Поэтому я расскажу вам, как осуществить перенос текстового контента на новую строку в операции alert, как удобно записывать код в программе, какие вспомогательные инструменты понадобятся при работе с document.write (), а также при использовании DOM команд и объектов. Ну что ж, вперед за дело!

Редактирование программного кода

Иногда возникают такие ситуации, когда в скрипте после выполнения какого-то условия необходимо вставить определенный кусок html-кода. Однако просто разрывать строку нажатием Enter нельзя. Для этого существует несколько вариантов.

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

<!DOCTYPE html>
<body>
<p>Поздравляем! Вам пришла открытка!</p>
<p id="demo2"></p>
<script>
//некое условие выполнилось и поэтому необходимо добавить ссылку
document.getElementById("demo2").innerHTML ="\
Нажми на меня<\/a>"
</script>
</body>

Второй вариант – это разрыв выполняемого кода при помощи знака плюса «+». Этот метод используется и в других языках программирования, поэтому встречается часто также и в JavaScript. Скрипт в такой ситуации будет выглядеть следующим образом:

<script>
//некое условие выполнилось и поэтому необходимо добавить ссылку
document.getElementById("demo2").innerHTML ="<a href="+
"'https://cs7052.vk.me/c540100/v540100226/1eff5/6ZQuKdFyLvo.jpg'>"+
"Нажми на меня<\/a>"
</script>

Перенос слов в alert ()

Вот тут все достаточно просто. Самый привычный и удобный способ переноса текста на новую строку, который также используется в C-подобных языках, JSON, Java и других. Стоит только вспомнить специальные символы и их обозначения.

Чаще всего для описываемого случая используют Escape-последователей перевода строки (\n) или же возврата каретки (\r). Обо всех символах можно почитать по ссылке.

Рассмотрите следующий пример.

<script>
alert («Первый\nВторой»);

alert («Третий\rЧетвертый»);

</script>

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

Хитро передаем строки через команды DOM

Вот теперь пришло время разобрать добавление строк в html-файл c учетом переносов. Для этого можно воспользоваться специальным тегом
, к примеру, вот так:

<!DOCTYPE html>
<body>
<p id="person"></p>
<script>
 
var str1 = 'Я Карлсон, который живет на крыше!';
var str2 = "И я очень люблю варенье!";
 
document.getElementById("person").innerHTML = str1+ "<br/><b>" + str2 + "</b><br/>";
 
</script>
</body>

Помимо этого, можно использовать другой парный элемент – <pre>. Данный тег позволяет сохранять все пробельные символы в том количестве, в котором их задал девелопер. Однако он преобразует шрифт текстового контента в моноширный. Таким образом, измененная программа будет выглядеть вот так:

<!DOCTYPE html>
<body>
<h2 id="person"></h2>
<script>
 
var str1 = 'Я Карлсон, который живет на крыше!';
var str2 = "И я очень люблю варенье!";
 
document.getElementById("person").innerHTML ="<pre>"+ str1 +"\n    "+ str2 +"

А как же быть с document.write ()?

А здесь все точно так же, как и с предыдущим разделом. Вам стоит либо использовать
и убрать символ переноса строки, либо обратиться за помощью к <pre>.

<!DOCTYPE html>
<body>
 
<script>
document.write ("Я первый <br \/> А я второй");
document.write ("<pre>Я третий \n а я   четвертый<\/pre>");
</script>
</body>

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

Пока-пока!

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

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