更优雅的多行 JavaScript 字符串方法

我知道如何在不使用 += 的情况下打印大字符串的唯一方法是使用 \ 反斜杠。丑陋的！

<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 中打印长的多行字符串的更好方法吗？

一般来说，答案是：不在语言语法中。尽管正如 Ken 在他的回答中指出的那样，有很多解决方法（我个人的方法是通过 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
 */