Creating multiline strings in JavaScript

ID : 182

viewed : 89

Tags : javascriptstringmultilineheredocjavascript

Top 5 Answer for Creating multiline strings in JavaScript

vote vote

93

Update:

ECMAScript 6 (ES6) introduces a new type of literal, namely template literals. They have many features, variable interpolation among others, but most importantly for this question, they can be multiline.

A template literal is delimited by backticks:

var html = `   <div>     <span>Some HTML here</span>   </div> `; 

(Note: I'm not advocating to use HTML in strings)

Browser support is OK, but you can use transpilers to be more compatible.


Original ES5 answer:

Javascript doesn't have a here-document syntax. You can escape the literal newline, however, which comes close:

"foo \ bar" 
vote vote

88

ES6 Update:

As the first answer mentions, with ES6/Babel, you can now create multi-line strings simply by using backticks:

const htmlString = `Say hello to  multi-line strings!`; 

Interpolating variables is a popular new feature that comes with back-tick delimited strings:

const htmlString = `${user.name} liked your post about strings`; 

This just transpiles down to concatenation:

user.name + ' liked your post about strings' 

Original ES5 answer:

Google's JavaScript style guide recommends to use string concatenation instead of escaping newlines:

Do not do this:

var myString = 'A rather long string of English text, an error message \                 actually that just keeps going and going -- an error \                 message to make the Energizer bunny blush (right through \                 those Schwarzenegger shades)! Where was I? Oh yes, \                 you\'ve got an error and all the extraneous whitespace is \                 just gravy.  Have a nice day.'; 

The whitespace at the beginning of each line can't be safely stripped at compile time; whitespace after the slash will result in tricky errors; and while most script engines support this, it is not part of ECMAScript.

Use string concatenation instead:

var myString = 'A rather long string of English text, an error message ' +                'actually that just keeps going and going -- an error ' +                'message to make the Energizer bunny blush (right through ' +                'those Schwarzenegger shades)! Where was I? Oh yes, ' +                'you\'ve got an error and all the extraneous whitespace is ' +                'just gravy.  Have a nice day.'; 
vote vote

76

the pattern text = <<"HERE" This Is A Multiline String HERE is not available in js (I remember using it much in my good old Perl days).

To keep oversight with complex or long multiline strings I sometimes use an array pattern:

var myString =     ['<div id="someId">',     'some content<br />',     '<a href="#someRef">someRefTxt</a>',     '</div>'    ].join('\n'); 

or the pattern anonymous already showed (escape newline), which can be an ugly block in your code:

    var myString =         '<div id="someId"> \ some content<br /> \ <a href="#someRef">someRefTxt</a> \ </div>'; 

Here's another weird but working 'trick'1:

var myString = (function () {/*    <div id="someId">      some content<br />      <a href="#someRef">someRefTxt</a>     </div>         */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1]; 

external edit: jsfiddle

ES20xx supports spanning strings over multiple lines using template strings:

let str = `This is a text     with multiple lines.     Escapes are interpreted,     \n is a newline.`; let str = String.raw`This is a text     with multiple lines.     Escapes are not interpreted,     \n is not a newline.`; 

1 Note: this will be lost after minifying/obfuscating your code

vote vote

64

You can have multiline strings in pure JavaScript.

This method is based on the serialization of functions, which is defined to be implementation-dependent. It does work in the most browsers (see below), but there's no guarantee that it will still work in the future, so do not rely on it.

Using the following function:

function hereDoc(f) {   return f.toString().       replace(/^[^\/]+\/\*!?/, '').       replace(/\*\/[^\/]+$/, ''); } 

You can have here-documents like this:

var tennysonQuote = hereDoc(function() {/*!   Theirs not to make reply,   Theirs not to reason why,   Theirs but to do and die */}); 

The method has successfully been tested in the following browsers (not mentioned = not tested):

  • IE 4 - 10
  • Opera 9.50 - 12 (not in 9-)
  • Safari 4 - 6 (not in 3-)
  • Chrome 1 - 45
  • Firefox 17 - 21 (not in 16-)
  • Rekonq 0.7.0 - 0.8.0
  • Not supported in Konqueror 4.7.4

Be careful with your minifier, though. It tends to remove comments. For the YUI compressor, a comment starting with /*! (like the one I used) will be preserved.

I think a real solution would be to use CoffeeScript.

ES6 UPDATE: You could use backtick instead of creating a function with a comment and running toString on the comment. The regex would need to be updated to only strip spaces. You could also have a string prototype method for doing this:

let foo = `   bar loves cake   baz loves beer   beer loves people `.removeIndentation() 

Someone should write this .removeIndentation string method... ;)

vote vote

53

You can do this...

var string = 'This is\n' + 'a multiline\n' +  'string'; 

Top 3 video Explaining Creating multiline strings in JavaScript

Related QUESTION?