Question

我知道如何在不使用+ =的情况下打印大字符串的唯一方法是使用\ backslashes。难看！

<div id="foo"></div>
<script type="text/javascript">
var longString = '<div id="lol">\
        <div id="otherstuff">\
            test content. maybe some code\
        </div>\
    </div>';

document.getElementById('foo').innerHTML = longString;
</script>

有没有办法在longString没有污染的情况下这样做？ php有$ foo ='''长多行字符串''';我想在javascript中使用它！

任何人都知道在javascript中打印长多行字符串的更好方法吗？

Answer 1

一般来说，答案是：不在语言语法中。虽然肯在他的回答中指出有很多解决办法（我的个人方法是通过AJAX加载文件）。在您的特定情况下，我更喜欢创建HTML构造函数，以便您可以使用javascript对象文字定义HTML结构。类似的东西：

var longString = makeHTML([{
  div : {
    id : "lol",
    children : [{
      div : {
        id : "otherstuff",
        children : [{
            text : "test content. maybe some code"
        }]
    }]
 }]

我发现它更容易处理。另外，你可以在需要它时使用真正的函数文字来避免字符串引用地狱：

makeHTML([{
  span : {
    onclick : function (event) {/* do something */}
  }
}]);

注意：makeHTML的实现留给读者练习

补充答案：

通过我的硬盘快速扫描后发现了一些旧代码。它与我上面提到的有点不同所以我想我会分享它来说明你可以编写这样的函数的众多方法之一。 Javascript是一种非常灵活的语言，并没有太多强迫您以这种或那种方式编写代码。选择您感觉最自然和最舒适的API，并编写代码来实现它。

以下是代码：

function makeElement (tag, spec, children) {
    var el = document.createElement(tag);
    for (var n in spec) {
        if (n == 'style') {
            setStyle(el,spec[n]);
        }
        else {
            el[n] = spec[n];
        }
    }
    if (children && children.length) {
        for (var i=0; i<children.length; i++) {
            el.appendChild(children[i]);
        }
    }
    return el;
}

/* implementation of setStyle is
 * left as exercise for the reader
 */

使用它会是这样的：

document.getElementById('foo').appendChild(
  makeElement(div,{id:"lol"},[
    makeElement(div,{id:"otherstuff"},[
      makeText("test content. maybe some code")
    ])
  ])
);

/* implementation of makeText is
 * left as exercise for the reader
 */

Answer 2

如果你有一个大块的一种技术是<script>标签，其类型无效。它将被浏览器忽略。

<script type="text/x-my-stuff" id="longString">
    <div id="lol">
        <div id="otherstuff">
            test content. maybe some code
        </div>
    </div>
</script>
<script type="text/javascript">
    var longString = document.getElementById("longString").text;
    document.getElementById('foo').innerHTML = longString;
</script>

Answer 3

这也有效：

var longString = 
  '<div id="lol">' +
    '<div id="otherstuff">' +
      'test content. maybe some code' +
    '</div>' +
  '</div>';

Answer 4

你真的可以通过创建<div id="lol">作为HTML来最小化这种丑陋，并使用.innerHTML =“测试内容设置其内容。也许是一些代码”

我不喜欢在Javascript中创建HTML，因为这个确切的问题，而是使用“模板”元素，我只是克隆然后操纵。

var lol = document.getElementById("template_lol").clone();
lol.firstChild.innerHTML = "code and stuff";
foo.appendChild(lol);

这是HTML：

<body>
<div>normal stuff</div>

<div style="display:none" id="templateBucket">
  <div id="template_lol"><div class="otherstuff"></div></div>
</div>
</body>

Answer 5

我很确定答案是否定的。你可以在每一行使用反斜杠或“+”和一个新字符串（虽然我会提倡使用反斜杠以避免不必要的字符串连接）或者将它全部放在单行上并且'\ n'被广泛使用，但我相信你已经覆盖了你的根据你的问题。

Answer 6

this question的答案中讨论了一些有吸引力的选项。

一个更优雅的多行javascript字符串方法

6 个答案:

补充答案：