Multiline String Variables in JavaScript

This works:

var htmlString = "<div>This is a string.</div>";

This fails:

var htmlSTring = "<div>
  This is a string.
</div>";

Sometimes this is desirable for readability.

Add backslashes to get it to work:

var htmlSTring = "<div>\
  This is a string.\
</div>";

Comments

  1. User Avatar
    Dor
    Permalink to comment#

    Looks pretty cool. I was looking for a way to do that…

  2. User Avatar
    Matt Thiessen
    Permalink to comment#

    try this

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <div class="crazy_idea" thorn_in_my_side='<table border="0">
    <tr>
    <td ><span class="mlayouttablecellsdynamic">PACKAGE price $65.00</span></td>
    </tr>
    </table>'></div>
    <script type="text/javascript">
    alert($(".crazy_idea").attr("thorn_in_my_side"));
    </script>

  3. User Avatar
    NIle
    Permalink to comment#

    This also works.
    [code]
    var htmlSTring = “”+
    ” This is a string.”+
    “”;
    [/code]

  4. User Avatar
    Dom
    Permalink to comment#

    I really like this way:

    var htmlString = [
    ”,
    ”,

    ].join(”);

  5. User Avatar
    Fabrizio Calderan
    Permalink to comment#

    Looking at this guide (under «Multiline string literals») this syntax don’t seems to be a good practice and it’s not part of ECMAScript (but I admit I like it anyway)

  6. User Avatar
    hsablonniere
    Permalink to comment#

    Douglas Crockford advise not to use that because if you have a space character after the slash that escapes your multiline string it fails.

    Look at slide 12 : http://www.slideshare.net/douglascrockford/level-7-ecmascript-5-the-new-parts

    Try one of theses techniques : http://jsperf.com/zp-string-concatenation/5

  7. User Avatar
    David
    Permalink to comment#

    If PHP is available, another option is to parse out the extra white space on the server like so (short tags could be useful here too, but not advised):

    
    var injection = "<?php
    ?><table><?php
        ?><tr><?php
            ?><td>Hello</td><?php
            ?><td>World!</td><?php
        ?></tr><?php
    ?></table>";
    

    I think Fabrizio is right, the escaping trick isn’t supported by the standard.

  8. User Avatar
    Steve
    Permalink to comment#
  9. User Avatar
    Wizard of Osch

    I find the following solution pretty nice, when the string comes from PHP.

    var MultiLine = '<?php echo str_replace("\n", "\\n", $the_string);?>'

  10. User Avatar
    bangucen
    Permalink to comment#

    any help my code :

    i should error to my code :(

    When these folks get on board, the new passenger count is reported to the conductor. Build a string called countMessage that uses numPassengers to say:

    Attention: There are now 3 passengers on the train!

  11. User Avatar
    Michal Miky Jankovský
    Permalink to comment#

    with ECMA6 you can use:
    var htmlString = `multiline
    like
    a
    charm`;
    :)

  12. User Avatar
    Dantalion
    Permalink to comment#

    With this way you can preserve normal html indenting.

    <script>
        model = '<div data-window-id="' + var1 +'" class="col-md-4 window ' + var2 + '">';
            model += '<div class="header">';
                model += '<div class="content">' + var4 + '</div>';
                model += '<i class="pull-right glyphicon glyphicon-remove"></i>'
            model += '</div>';
        model += '</div>';
    </script>
    
  13. User Avatar
    David Spector
    Permalink to comment#

    Michal Miky Jankovský’s suggestion (using accent grave to quote multiline literal strings) works great on latest Firefox and Chrome, but fails on IE 11. I wish Javascript were a living language, one that could be improved without strain. I see a reason for one-line use of apostrophe and double-quote, but it is not a good one, while there are many, many use cases for multiline quotations.

  14. User Avatar
    Todd
    Permalink to comment#

    I found this very helpful, but I had to troubleshoot a new error for a while. I use single quotes for my strings in Javascript instead of double quotes, so a callout that the double quotes are a requirement for this method to work properly would have been helpful and time saving.

  15. User Avatar
    mishal153
    Permalink to comment#

    Template literals is the best way to go

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag