在 javascript 代碼中將字符串分成多行

Question

我正在嘗試在我的 javascript 代碼中格式化（美化、整理、清理 .. 你的名字）HTML 的片段，或者換句話說，將它分散在多行而不是寫在一行上，這樣它就可以輕松閱讀。

基本上，這是一段 html 代碼，我試圖通過調用 jQuery 的.append();將 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>'); 

Answer 4

如果您只是想將渲染輸出拆分為新行，則在您希望換行符出現的位置附加 \\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);

Answer 5

你可以這樣試試

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

Answer 6

從HTML5、CSS 和 JavaScript 的新視角第 6 版，第 9 章JavaScript 入門：

"如果您想將一個文本字符串分成幾行，您可以使用以下反斜杠\\字符指示該文本字符串在下一行繼續。

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

Answer 7

如果您正在使用反引號渲染 HTML 並希望在內部傳遞一個變量，則非常簡單，只需在變量周圍添加反引號並將其連接起來即可。 讓我們看看下面的例子

var x = 1; 
$(wrapper).append(`
                <div class="card">
                   <div class="card-body">
                      <h5 class="card-title">Plot `+ x +` </h5>
                   </div>
                </div>
               `);