Ошибка Javascript - Неопределенный строковый литерал при конкатенации, если в конкатенированной строке есть пробел

Question

У меня есть несколько случаев, когда мне нужно создать строку с помощью JavaScript для добавления к элементу HTML.

Мой метод обычно заключался в том, чтобы сделать что-то вроде этого:

document.getElementById('theID').innerHTML=document.getElementById('theID').innerHTML+'<li>theString</li>';

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

Пример того, что я хотел бы получить:

document.getElementById('theID').innerHTML=
document.getElementById('theID').innerHTML+
"<ul>
  <li><a href='"+varLink+"'>"+var1+"</a></li>
</ul>";

Моя проблема в том, что у него не может быть пробелов, или я получаю неопределенный строковый литерал при загрузке страницы. Даже пробел после и перед '+' для объединения вызывает ошибку. Если я удаляю все пробелы из строки, тогда она работает нормально, но, как я уже сказал, ее трудно поддерживать / редактировать.

Прежде всего, есть ли лучший способ сделать это через jQuery, который не будет генерировать ту же ошибку при загрузке страницы? За исключением этого, есть ли способ получить пробел, не получая неопределенный строковый литерал?

Answer 1

Вы могли бы использовать один \ для выхода, но это не очень хорошая идея, так как не является частью стандарта;

var s ="<ul> \r\n\
  <li><a href='"+varLink+"'>"+var1+"</a></li> \r\n\
  bla bla bla \r\n\
</ul>";

Единственный другой способ - объединить каждую часть строки по отдельности.
Использование массива может быть эффективным / читабельным;

var buff = [];
buff.push("<li>...");
buff.push("</ul>");
document.getElementById('theID').innerHTML += buff.join("\r\n");

Answer 2

Ваша проблема не в пробелах, ее разрывы строк в середине строк. Вы можете обойти это с помощью \, но, как упоминал Алекс К, это нестандартно.

Что бы это ни стоило, я бы сделал что-то вроде этого.

document.getElementById('theID').innerHTML += [ 
"<ul>",
  "<li><a href='", varLink, "'>", var1, "</a></li>",
"</ul>"
].join('');

Создайте массив, объедините значения и добавьте их в innerHTML. Вы можете добавить свой пробел для презентации без ошибок.

P.S. По сути, это ответ Алекса К. с некоторыми поправками, я проголосовал за него.

Answer 3

Эквивалент jQuery будет аккуратнее:

$ ('# theID'). Append (...);

Answer 4

Я не знаю, отвечает ли это на ваш вопрос, но если вам нужно пространство, вам нужно использовать +, как я знаю, чтобы заставить его работать, как

document.getElementById('theID').innerHTML += 
 document.getElementById('theID').innerHTML = 
 "<ul>"+
 "  <li><a href='"+varLink+"'>"+var1+"</a></li>"+
 "</ul>";

 }