一个更优雅的多行javascript字符串方法 [英] a more graceful multi-line javascript string method

问题描述

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

The only way I know how to print a huge string without using += is to use \ backslashes. ugly!

<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中使用它！

is there any way to do this where the longString is untainted? php has $foo = ''' long multiline string '''; I want this in javascript!

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

推荐答案

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

In general, the answer is: not in the language syntax. Though as Ken pointed out in his answer there are many work-arounds (my personal method is to load a file via AJAX). In your specific case though, I'd prefer creating a HTML constructor function so you can then define the HTML structure using javascript object literals. Something like:

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

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

which I find to be much easier to handle. Plus, you this would allow you to use real function literals when you need it to avoid string quoting hell:

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

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

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

Found some old code after a quick scan through my hard disk. It's a bit different from what I suggested above so I thought I'd share it to illustrate one of the many ways you can write functions like this. Javascript is a very flexible language and there is not much that forces you to write code one way or another. Choose the API you feel most natural and comfortable and write code to implement it.

以下是代码：

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

这篇关于一个更优雅的多行javascript字符串方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！