在javascript代码中将字符串分成多行

Question

我试图在我的javascript代码中格式化(美化,整理,清理......你的名字)一段HTML,或者换句话说,将它展开在多行而不是将它写在一行上,这样它就可以了很容易阅读

基本上,它是一段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;

我没有任何问题.

我知道这个问题并不是什么大问题,但我只是为了简单起见而试图解决这个问题.

有什么建议？

Answer 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>`;

Answer 2

如果要编写多行字符串,则应使用"\":

例:

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

Answer 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>');