javascript - 在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

如果你有一个多行字符串，你需要使用 multiline string syntax .

但是，最好将 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>`;