在 Javascript 中使用 html 内容设置多行字符串样式的正确方法？

Question

我正在使用 JavaScript 需要创建菜单结构的代码。我正在使用追加语句并为每个主题添加代码，其中包含子主题列表，以便脚本将整个内容呈现为菜单。如果我不 space 去掉字符串中的标签，这会很好用，但我希望它看起来更干净，以便进行调试和编辑。

sidebarMainMenu.append('\
    <li id="par-1-menu"><a href="topic1.html">MainTopic-1</a>\
        <ul class="sub-menu">\
            <li id="sub-par-1-1-menu"><a href="topic1.html#sub-par-1-1">#1: SubTopic-1</a></li>\
            <li id="sub-par-1-2-menu"><a href="topic1.html#sub-par-1-2">#2: SubTopic-2</a></li>\
            <li id="sub-par-1-3-menu"><a href="topic1.html#sub-par-1-3">#3: SubTopic-3</a></li>\
            <li id="sub-par-1-4-menu"><a href="topic1.html#sub-par-1-4">#4: SubTopic-4</a></li>\
            <li id="sub-par-1-5-menu"><a href="topic1.html#sub-par-1-5">#5: SubTopic-5</a></li>\
            <li id="sub-par-1-6-menu"><a href="topic1.html#sub-par-1-6">#6: SubTopic-6</a></li>\
        </ul>\
    </li>\
');

这给了我错误：Uncaught SyntaxError: Unexpected token ILLEGAL

不确定我在这里错过了什么，但我确定这是一个小错误。无论如何，这甚至是处理 JS 函数中的多行字符串参数的正确方法吗？提前致谢。

Answer 1

这不是在 JavaScript 中处理多行字符串的首选方式。根据 MDN article on Template Literals，有两种方法，要么使用标准字符串，要么（在支持它们的浏览器中）使用较新的模板文字语法。

首先，这是关于如何将多行字符串文字与普通 JavaScript 字符串一起使用的 MDN 示例：

Using normal strings, you would have to use the following syntax in order to get multi-line strings:
console.log("string text line 1\n"+
"string text line 2");
// "string text line 1
// string text line 2"

本质上，您只是将每一行写成一个字符串，然后使用 + 运算符将它们连接起来。但是，在 ECMAScript 2015 中，有一种新方法可以做到这一点（注意反引号而不是引号）：

To get the same effect with multi-line strings, you can now write:
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

请注意，模板文字仅在某些较新的浏览器中受支持，您可以查看链接文章底部的 table 以了解有关支持的详细信息。

Answer 2

copy/pasting 控制台的字符串没有错误。

您的问题更像是一种意见，而不是 right/wrong。有人可能会争辩说你永远不应该把 html 字符串放在 javascript 中，但它们是纯粹主义者，在现实世界中不起作用。

另一个人可能会争辩说你应该分解你的字符串并做循环。

还有一个人可能会争辩说，您应该将标记放在页面中的某处并通过 javascript 引用它以将其放在您想要的位置。

另一个人可能会争辩说您应该使用模板语言并使用 javascript 中的数据填充模板。

Answer 3

它是第一行，在打开引文后你有一个反斜杠并且没有内容，如果你将你的第一个 li 标签移到那里它会起作用。

在 Javascript 中使用 html 内容设置多行字符串样式的正确方法？

The right way to style multi line string with html content in Javascript?

javascript

jquery

html

multiline