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

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

javascript

一种更优雅的多行javascript字符串方法,javascript,Javascript,我知道如何在不使用+=的情况下打印大字符串的唯一方法是使用\反斜杠。丑 <div id="foo"></div> <script type="text/javascript"> var longString = '<div id="lol">\ <div id="otherstuff">\ test content. maybe some code\ </div>\

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

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


var longString=\
\
测试内容。也许是一些密码\
\
';
document.getElementById（'foo'）。innerHTML=longString；

在长串未被污染的地方，有什么方法可以做到这一点吗？php有$foo=''长多行字符串'；我想要javascript的

有谁知道用javascript打印长多行字符串的更好方法吗？

的答案中讨论了一些不太吸引人的选项。

通过将

创建为HTML，并将其内容设置为.innerHTML=“test content.maybe some code”，确实可以最大限度地减少这种丑陋

由于这个问题，我不喜欢在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>


普通的东西

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

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


测试内容。也许是一些密码
var longString=document.getElementById（“longString”）.text；
document.getElementById（'foo'）。innerHTML=longString；

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

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

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

我发现这更容易处理。另外，这将允许您在需要时使用实函数文字，以避免字符串引用：

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

这也有效：

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

var longString=
'' +
'' +
"测试内容。也许是一些代码'+
'' +
'';

可能重复的可能重复的可能重复的是，它有效，每个人都知道这一点，而且它和反斜杠一样难看。您也可以使用language属性，设置language='text'，并省略该类型，而不是使用无效的类型。请看这里波蒂的答案：效果似乎完全相同，但为了让这些可怜的生物平静下来，他们对一切无效和有黑客行为感到多么不寒而栗……长期以来，

language

属性一直被弃用，取而代之的是实际上正确指定的

type

属性。因此，我认为合理地考虑该技术严格低于这一技术，并给出它们的兼容性。但事实上，整个问题早已过时；backtick分隔字符串将是当前正确的方法。backtick在IE中不起作用。您的反对意见是正确的。我至今仍在使用您的方法，类型为='invalid'。