Разбиение строки на несколько строк внутри javascript-кода

Я пытаюсь отформатировать (украсить, упорядочить, очистить.. вы назовите его) фрагмент HTML внутри моего кода javascript или, другими словами, разложить его на несколько строк, а не писать на одной строке, его можно легко прочитать.

В принципе, это часть html-кода, которую я пытаюсь добавить на страницу, вызывая метод jQuery .append();.

И вот что я пытаюсь сделать:

$('.videos').append('<li>
                    <span>' + count + '</span> - 
                    <a href="' + vList[i].player + '">
                        <span class="title">' + videoTitle + '</span>
                    </a>
                    </li>');

По-видимому, это не сработает. Я получаю Uncaught SyntaxError: Unexpected token >

Когда написано следующим образом, все работает нормально.

$('.videos').append('<li><span>' + count + '</span> - <a href="' + vList[i].player + '"><span class="title">' + videoTitle + '</span></a></li>');

Как-то странно, что, когда я пытался сделать точные вещи,

var albumURL = API + '/video.get?=owner_id=' + userID +
                     '&album_id=' + aList[i].album_id +
                     '&access_token=' + accessToken;

У меня не было проблем вообще.

Я знаю, что эта проблема не такая большая, но я пытаюсь обойти ее просто ради простоты.

Любые предложения?

Ответ 1

Если у вас многострочная строка, вам нужно использовать синтаксис многострочной строки.

Однако лучше хранить свой HTML в шаблонах, а не код:) Это делает их более читаемыми, более многоразовыми и более удобными для обслуживания.

Как насчет чего-то вроде - в вашем HTML:

<script type="text/template" id="videoTemplate">
    <li>
      <span>{{count}}</span>
      <a href="{{videoURL}}">
        <span class="title">{{videoTitle}}</span>
      </a>
    </li>
</script>

Затем в JavaScript

var template = $("#videoTemplate").html();
$(".videos").append(template.replace("{{count}}",count).
                             replace("{{videoURL}}",vList[i].player).
                             replace("{{videoTitle}}",videoTitle));

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

Код не должен даже знать о изменениях шаблона, и дизайнер может изменить дизайн, не зная JavaScript.

Конечно, если вы часто это делаете, вы можете использовать механизм шаблонов и не иметь цепочку .replace.

ES2015 также вводит строки шаблонов, которые также являются прекрасными и в принципе служат одной цели:

 const videoTemplate = `<li>
      <span>${count}</span>
      <a href="${vList[i].player}">
        <span class="title">${videoTitle}</span>
      </a>
    </li>`;

Ответ 2

Если вы хотите написать многострочную строку, вы должны использовать "\":

Пример:

$('.videos').append('<li> \
                <span>' + count + '</span> - \
                <a href="' + vList[i].player + '"> \
                    <span class="title">' + videoTitle + '</span> \
                </a> \
                </li>');

Ответ 3

Новый ответ:

С ES6 вы можете фактически использовать конкатенацию строк, которая нечувствительна к разрыву строки:

var html = `
    <li>
        ${count}
    </li>
`;

и разрывы строк не будут проблемой. До ES6 я использовал в основном массивы и контактировал их. Быстрее:

var html = [
    '<li>',
        count
    '</li>'
].join('');

Старый ответ:

В javascript вы не можете сломать строки, не конкатенируя их с помощью + или используя \. Попробуйте следующее:

$('.videos').append('<li>' +
    '<span>' + count + '</span> - ' +
    '<a href="' + vList[i].player + '">' +
    '<span class="title">' + videoTitle + '</span>' +
    '</a>' +
    '</li>');

Ответ 4

вы можете попробовать как это

$('.videos').append( ['<li>',
    '<span>' + count + '</span> - ' ,
    '<a href="' + vList[i].player + '">' ,
        '<span class="title">' + videoTitle + '</span>' ,
    '</a>' ,
'</li>'].join('') );

Ответ 5

Если вы просто хотите разделить полученный вывод на новые строки, добавьте \n, где вы хотите, чтобы новая строка появлялась, например...

$('.videos').append('<li>\n<span>' + count + '</span> -\n<a href="' + vList[i].player + '">\n<span class="title">' + videoTitle + '</span>\n</a>\n</li>\n');

И если вы хотите, чтобы ваш JS выглядел красиво, вы можете попробовать это, что также обеспечит отступ от отображаемого HTML.

var item = '';

item += '<li>\n';
item += '    <span>' + count + '</span> -\n';
item += '    <a href="' + vList[i].player + '">\n';
item += '        <span class="title">' + videoTitle + '</span>\n';
item += '    </a>\n';
item += '</li>\n';

$('.videos').append(item);