发表新帖
发表新帖

a more graceful multi-line javascript string method

后端 未结
关注
5 458
轻奢々
轻奢々 2021-01-12 04:22

The only way I know how to print a huge string without using += is to use \\ backslashes. ugly!
相关标签:
5条回答
  • 野性不改
    2021-01-12 04:35

    A few somewhat unattractive options are discussed in the answers to this question.

    0 讨论(0)
  • 清歌不尽
    2021-01-12 04:42

    You really could minimize this ugliness by creating your <div id="lol"> as HTML, and set its content with .innerHTML = "test content. maybe some code"

    I don't like creating HTML in Javascript because of this exact issue, and instead use "template" elements which i simply clone then manipulate.

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

    And this is the HTML:

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

<div style="display:none" id="templateBucket">
  <div id="template_lol"><div class="otherstuff"></div></div>
</div>
</body>
    0 讨论(0)
  • 悲哀的现实
    2021-01-12 04:45

    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 */}
  }
}]);

    note: the implementation of makeHTML is left as exercise for the reader

    Additional answer:

    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.

    Here's the code:

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

    Using it would be something like:

    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
 */
    0 讨论(0)
  • 粉色の甜心
    2021-01-12 04:56

    One technique if you have a big block is a <script> tag with an invalid type. It will be ignored by browsers.

    <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>
    0 讨论(0)
  • 时光取名叫无心
    2021-01-12 04:58

    This works too :

    var longString = 
  '<div id="lol">' +
    '<div id="otherstuff">' +
      'test content. maybe some code' +
    '</div>' +
  '</div>';
    0 讨论(0)
 看不清?
提交回复
热议问题