Правильный способ создания многострочной строки с содержимым html в Javascript?

Question

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

sidebarMainMenu.append('\ 
    <li id="par-1-menu"><a href="topic1.html">MainTopic-1</a>\ 
     <ul class="sub-menu">\ 
      <li id="sub-par-1-1-menu"><a href="topic1.html#sub-par-1-1">#1: SubTopic-1</a></li>\ 
      <li id="sub-par-1-2-menu"><a href="topic1.html#sub-par-1-2">#2: SubTopic-2</a></li>\ 
      <li id="sub-par-1-3-menu"><a href="topic1.html#sub-par-1-3">#3: SubTopic-3</a></li>\ 
      <li id="sub-par-1-4-menu"><a href="topic1.html#sub-par-1-4">#4: SubTopic-4</a></li>\ 
      <li id="sub-par-1-5-menu"><a href="topic1.html#sub-par-1-5">#5: SubTopic-5</a></li>\ 
      <li id="sub-par-1-6-menu"><a href="topic1.html#sub-par-1-6">#6: SubTopic-6</a></li>\ 
     </ul>\ 
    </li>\ 
'); 

Это дает мне ошибку: Uncaught SyntaxError: Неожиданный токен НЕЗАКОННО

Не уверен, что я пропустил здесь, но я уверен, что это небольшая ошибка. Независимо от того, является ли это даже правильным подходом к обработке многострочных аргументов строки в JS-функциях? Заранее спасибо.

Answer 1

Это не лучший способ сделать многострочные строки в JavaScript. Согласно MDN article on Template Literals, существует два способа: использовать стандартные строки или (в браузерах, которые их поддерживают), используя новый синтаксис шаблонов шаблонов.

Во-первых, вот пример MDN о том, как использовать строку из нескольких строк буквального с простыми строками JavaScript:

Using normal strings, you would have to use the following syntax in order to get multi-line strings:

console.log("string text line 1\n"+ 
"string text line 2"); 
// "string text line 1 
// string text line 2" 

По сути, вы просто пишете каждую строку в виде строки и конкатенации их с + оператор. Тем не менее, с ECMAScript 2015, есть новый способ сделать это (обратите внимание на обратные кавычки, а не кавычки):

To get the same effect with multi-line strings, you can now write:

console.log(`string text line 1 
string text line 2`); 
// "string text line 1 
// string text line 2" 

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

Answer 2

копирование/вставка этой строки в консоль не дает ошибок.

Ваш вопрос скорее скорее мнения, чем правильного/неправильного. Можно утверждать, что вы никогда не должны помещать html-строки в javascript, но они будут пуристами и не будут работать в реальном мире.

Другой может утверждать, что вы должны сломать строки и сделать петли.

Еще один может возразить, что вы должны поместить разметку на страницу где-нибудь и ссылаться на нее через javascript, чтобы поместить ее туда, где хотите.

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

Answer 3

Его первая строка, после открытия цитаты у вас есть обратная косая черта и нет содержимого, если вы перенесли свою первую бирку li там, она будет работать.