12

我正在尝试在我的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;

我一点问题都没有。

我知道这个问题没什么大不了的，但为了简单起见，我试图解决它。

有什么建议么？

4

6 回答 6

21

如果你有一个多行字符串，你需要使用多行字符串语法。

但是，最好将 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>`;
于 2013-10-11T08:03:08.880 回答
10

如果你想写一个多行字符串，你应该使用“\”：

例子：

$('.videos').append('<li> \
                <span>' + count + '</span> - \
                <a href="' + vList[i].player + '"> \
                    <span class="title">' + videoTitle + '</span> \
                </a> \
                </li>');
于 2013-10-11T08:02:46.270 回答
7

新答案：

使用 ES6，您实际上可以使用对换行不敏感的字符串连接：

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

并且换行符不会成为问题。在 ES6 之前，我主要使用数组并将它们连接起来。它更快：

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

老答案：

+在 javascript 中，如果不使用 a或 using连接它们，就不能断行\。试试这个：

$('.videos').append('<li>' +
    '<span>' + count + '</span> - ' +
    '<a href="' + vList[i].player + '">' +
    '<span class="title">' + videoTitle + '</span>' +
    '</a>' +
    '</li>');
于 2013-10-11T07:58:54.313 回答
1

如果您只是想将渲染输出拆分到新行上，请在您希望换行符出现的位置附加 \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);
于 2013-10-11T08:15:02.183 回答
0

你可以试试这样

$('.videos').append( ['<li>',
    '<span>' + count + '</span> - ' ,
    '<a href="' + vList[i].player + '">' ,
        '<span class="title">' + videoTitle + '</span>' ,
    '</a>' ,
'</li>'].join('') );
于 2013-10-11T08:03:19.537 回答
0

来自HTML5、CSS 和 JavaScript 第 6 版的新视角，第 9 章JavaScript 入门：

“如果要将文本字符串分成多行，可以使用以下反斜杠\字符指示文本字符串在下一行继续。

正确换行的示例：
      window.alert("Welcome \
      to Tulsa");

于 2020-10-25T23:47:49.813 回答