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

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
 */