在JavaScript代码中如何将一个字符串分成多行

Question

我正在尝试在我的javascript代码中格式化（美化，整理，清理..你可以这样说）一小段HTML，换句话说，将它分散成多行而不是写在一行上，以便能够更容易地阅读。

基本上，这是一段我试图通过调用jQuery的.append();方法将其附加到页面上的HTML代码片段。

这就是我想做的：

$('.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;

我一点问题都没有。

我知道这个问题并不是很严重，但为了简单起见，我正在尝试解决它。

有任何建议吗？

- Simone

---

嘿，伙计们！请查看我在 https://dev59.com/c3RA5IYBdhLWcg3w2xsI#19970452 的答案，也许对你有用。P: - AgelessEssence

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

- Benjamin Gruenbaum

---

谢谢@Benjamin。这绝对是一个很好的建议。我学到了新东西！ - Simone

Answer 2

如果您想编写多行字符串，应使用 "\"：

示例：

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

- ProGM

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

- Sergio

---

谢谢，@Sergio。这对我帮助很大，但我更喜欢使用\而不是+，因为我不必用引号分割整个代码。 - Simone

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

- ScaryLooking

---

这怎么可能行？我们每次都重新初始化item变量吗？请解释一下这是如何工作的？ - Pratham

说得好。这个例子完全是错的！我已经纠正了它。它只是一组语句，以一种使其更易于阅读的方式附加字符串的位。 - ScaryLooking

Answer 5

如果您正在使用反引号呈现HTML并想要在其中传递变量，只需在变量周围添加反引号并将其连接即可。让我们看一下下面的示例。

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

- Hadayat Niazi

Answer 6

你可以尝试这样做

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

- rab

Answer 7

来自HTML5、CSS和JavaScript第6版的新视角，第9章开始使用JavaScript:

"如果你想将一个文本字符串分成多行，可以使用以下反斜杠\字符表示该文本字符串继续到下一行。

正确换行的示例：
      window.alert("欢迎 \
      来到塔尔萨");

- Kelly