Creating multiline strings in JavaScript

Question

I have the following code in Ruby. I want to convert this code into JavaScript. What is the equivalent code in JS?

text = <<"HERE"
This
Is
A
Multiline
String
HERE

Partin

Answer 1

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"

Esemplastic

Be warned: some browsers will insert newlines at the continuance, some will not. – Sero

Visual Studio 2010 seems to be confused by this syntax as well. – Schilt

@Nate It is specified in ECMA-262 5th Edition section 7.8.4 and called LineContinuation : "A line terminator character cannot appear in a string literal, except as part of a LineContinuation to produce the empty character sequence. The correct way to cause a line terminator character to be part of the String value of a string literal is to use an escape sequence such as \n or \u000A." – Camey

So in summary it seems this is the most straightforward approach, compatible with all browsers at least back to IE6 (and probably earlier), as long as you don't care whether or not extra newlines might be added at the end of each line. Does anyone know which browsers/versions add newlines and which don't? – Rovit

Also: If you use UglifyJS for minification, it will put multiline strings created this way onto a single line (newline characters will not be added at the continuance). So as long as the browser you're developing in behaves the same way, then you can use this approach and get consistent results across browsers in the production version of your app (i.e. after minification). – Rovit

I don't see why you'd do this when browsers treat it inconsistently. "line1\n" + "line2" across multiple lines is readable enough and you're guaranteed consistent behavior. – Mohr

node 0.10.0: works; requires explicit \n chars. to insert actual line breaks (per ECMAScript 5 spec). In other words: if you want every string-literal source-code line to correspond to a line in the resulting string, end lines with \n\ – Retractor

This syntax is perfect for machines who will never accidentally put a space between the backslash and the newline. Everyone else will have to paste their code into SO's comment editor, to see the highlighted difference between \ and \ – Hospitalize

@Camey It's not a multiline string, it's a one line string split over multiple lines of code that make up a single statement – Despinadespise

@JuanMendes Yes? That is what the first sentence of the quote I did from the standard says. So what is your point? The seconds sentence tells in a formal way how to produce a string that has line terminators and that is split into multiple lines in the source code. I don't remember what Nate wrote in the now deleted comment, but I think it was something about this not being part of javascript. I refereed to the standard where it is defined and quoted the relevant part. – Camey

@Camey My point is that the question is asking for a multiline string, so this doesn't answer the question. Maybe the confusion is just because of the deleted comment that I never saw – Despinadespise

@JuanMendes And I haven't tried to answer the question because there was already plenty of other answers. Dresende has already commented "This is wrong, it's not multiline. It's only 1 line.", so I didn't need to repeat it. I only provided information about the LineContinuation in a comment, so I was a little surprised when you wrote your comment to me instead of Anonymous who was the one who answered the question! :) There is no support in ECMAScript 5.1 or earlier for the requested syntax. The closest thing is an escaped new line followed by a LineContinuation, but it is ugly, in my opinion. – Camey

This solution is not wrong - but it's obviously not the best. So sad it has such a high count here. Scroll down to read better solutions. – Mouse

AFAIK, IE still does not support it – Irresolvable

"Browser support is OK"... not supported by IE11 - not OK – Kendrick

I have tested template literal on safari 7.1 Mavericks, I doesn't work. – Enlarge

Browser support is NOT ok actually. IE gives "Invalid character" error for that character. I don't understand how it got so many upvotes... – Nealon

It Fails for IE – Marlyn

@sotn He probably meant "ok" as in "acceptable but not great". – Hokku

This answer doesn't work for html code so i wonder why its even the accepted answer in 2022. I am using latest version of chrome. I ended up using this willpeavy.com/tools/minifier – Oshaughnessy

How does this work with code indentation? Does it require stripping the whitespace? – Kaufmann

related: https://mcmap.net/q/40695/-template-literals-with-nested-backticks-in-es6 – Sigler

Answer 2

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.';

Douglassdougy

this doesn't work for me in canary chrome for windows even after enabling Experimental JavaScript – Sepulcher

I don't understand Google's recommendation. All browsers except extremely old ones support the backslash followed by newline approach, and will continue to do so in the future for backward compatibility. The only time you'd need to avoid it is if you needed to be sure that one and only one newline (or no newline) was added at the end of each line (see also my comment on the accepted answer). – Rovit

Those who want to try these stuffs, be sure to check [Chrome Canary][1] [1]: google.com/intl/en/chrome/browser/canary.html – Fidgety

Note that template strings aren't supported in IE11, Firefox 31, Chrome 35, or Safari 7. See kangax.github.io/compat-table/es6 – Upcoming

In EcmaScript 6, you'll be able to use backticks for Template Strings, known in the spec as a NoSubstitutionTemplate. I think you can try this and other features by first downloading canary chrome and then turning on Enable Experimental JavaScript. This doesn't work for me in canary chrome for windows even after enabling Experimental JavaScript. Agreed. I had tried it while writing a Chrome userscript and it didn’t work in any new or old version of Chromium or Chrome that I tried; they all threw ILLEGAL TOKEN errors. I guess as usual, Google wants to insist people do things their way. – Spitsbergen

@MattBrowne Google's recommendation is already documented by them, in order of importance of reasons: (1) The whitespace at the beginning of each line [in the example, you don't want that whitespace in your string but it looks nicer in the code] (2) whitespace after the slash will result in tricky errors [if you end a line with \ instead of `\` it's hard to notice] and (3) while most script engines support this, it is not part of ECMAScript [i.e. why use nonstandard features?] Remember it's a style guide, which is about making code easy to read+maintain+debug: not just "it works" correct. – Saransk

amazing that after all these years string concatenation is still the best/safest/most compliant way to go with this. template literals (above answer) don't work in IE and escaping lines is just a mess that you're soon going to regret – Scoles

Note that if you have a very long string of string concatenations, it can trigger a stack overflow (github.com/cmdcolin/technical_oddities) – Impropriety

Found out the hard way that older versions of Android do not support the backticks so if you have an Android app using the webView your backticks cause your app to not run! – Vizierate

I found one interesting video explaining ES6 template literals here : youtube.com/watch?v=asRu9MPojFE – Puck

Answer 3

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'¹:

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.`;

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

Dehumidifier

Please don't use the array pattern. It will be slower than plain-old string concatenation in most cases. – Coon

in most cases... did you also include the time required to allocate/build the array? Regardless... it's a bit more readable than joining arrays. – Coon

The array pattern is more readable and the performance loss for an application is often negligible. As that perf test shows, even IE7 can do tens of thousands of operations per second. – Indra

@Kooilnc: some browsers can compile several literal concats into a single literal string, and in machine code, no less. The benchmark ought to have tried a large concat of string variables as well, which would be a more fair comparison against join(). – Durmast

@RoyTinker: feel free to cook up a jsperf.com-test yourself, or fiddle around with my test ;) – Dehumidifier

This is my favorite way (it looks nice), and fast enough that I am willing to take a minor speed hit for code readability. – Cranach

You could make a little function to do fast joins: function fastjoin(array){ out = ''; for(i in array){ out += i; } return out; } – Payson

That's actually quite a bunch slower than those join's. Plus the join's are kind of the preferable way to do it. Joins it is. – Payson

I like joins. Write the code that writes the code. Much better than concatenating many times. It's redundancy. – Equites

+1 for an elegant alternative that not only works the same way in all browsers, but is also future-proof. – Spleenwort

Must encase with 'singles' and NOT "doubles" for me in Notepad++ – Subarctic

I personally just concatenate strings and let the performance issues get sorted out when the JS is minified and the strings are combined. – Twopenny

@Dehumidifier Your tests start with the array already created, that skews the results. If you add the initialization of the array, straight concatenation is faster jsperf.com/string-concat-without-sringbuilder/7 See #51685 As a trick for newlines, it may be OK, but it's definitely doing more work than it should – Despinadespise

@BMiner: 1) "Premature optimization is the root of all evil" - Donald Knuth, and 2) 'readability' is in the eye of the beholder – Erastianism

@bat When tested on Mac 10.9 with Firefox 32, the join was "100%" slower than concatenation, according to jsperf (972 million vs 1 million ops/second). – Amass

Be careful with the "comment in function" solution. Keep in mind that as soon as you will want to minimize your JS code, your comments will be stripped off. – Womanlike

+1 for the amazing regexp trick. Works like a charm and I love it. I still am having an issue with escaping /* characters within xml strings, but its unnecessary. I'm only doing this for file based testing. Thanks man! – Elyse

Tested on Win 8.1 in Firefox & Chrome, join is 33% slower than concatenate. – Monas

Tested on Win 8.1 in Chrome and Firefox, join is 99% slower for me. (1,997,886,948 vs 18,679,979 respectively 2,161,096,056 vs 2,145,283) – Statement

Unless this is deep inside a million nested loops and running on a potato, efficiency is probably irrelevant next to readability. +1 for the array – Coventry

There are >150 versions of the jsPerf test. I did not check even a large number of them. Version 25 tests both string concatenation and .join() on both predefined and inline arrays. String concatenation is on the order of 500 to 1,000 times faster than Array's .join(), based on testing in the current versions of Chrome and Firefox on 2017-02-19. String concatenation can be written with a similar level of readability. In my opinion, there is no effective benefit of using .join() for this, and a significant cost for just a "cool" style choice. – Almoner

Why would string concatenation be much faster than join? Is there some sort of magic in join's implementation? – Dorseydorsiferous

@zehelvion not anymore. This is a very old issue (2009), browsers are much better nowadays – Dehumidifier

@KooiInc, What about concatenation within the multiline string? – Siberia

@Seblor why not? The sub header was not informative. – Dehumidifier

AFAIK, Template strings (or template literals) were not supported until ES2015 (ES6), so saying that any ES20XX version do seems wrong. – Derzon

@Derzon see exploringjs.com/es6/ch_template-literals.html, also exploringjs.com/es6/ch_faq.html#sec_es6-vs-es2015 – Dehumidifier

Oh I get my confusion there. The ECMAScript versions started beeing named "ES20XX" after ES6, I forgot about that. – Derzon

I like the array approach. Sure, it may be slower, but correctness and readability is, typically, more important. I could see a rationale to not use it on the browser, but it would be a good approach with server-side javascript. Plus, now we have backtick ("`") string templates that are even better. – Audra

Example with regexp match contains variable in cooment expression /**/ . It can make problems if you decice to compress JS later. Many compressors remove comments! – Simonson

Ignoring the naysayers moaning about the "performance hit" the array trick is actually a really elegant solution. Major kudos to you for posting this. Some genuine outside the box thinking here! – Infundibulum

Yeah guys seriously, the array trick is both elegant and functions. If you want you can say myString = ["Line 1", "Line 2"].join("\n"); or myString = ["Line 1", "Line 2"].join("\\n") and then just console.log(myString), copy paste the now formatted string into your code. My favorite has to be the comment in the function converted to a string one though! – Label

Answer 4

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... ;)

Auteur

What!? creating and decompiling a Function to hack a multiline comment into being a multiline string? Now that's ugly. – Stambul

jsfiddle.net/fqpwf works in Chrome 13 and IE8/9, but not FF6. I hate to say it, but I like it, and if it could be an intentional feature of each browser (so that it wouldn't disappear), I'd use it. – Recompense

I had hope for function.toSource() for FF but no. – Recompense

@uosɐſ: for it to be intentional, it'd have to be in the spec; or so widespread used, that browser makers wouldn't want to remove this "accidental" feature. Thanks for the experiments though... Try some coffeescript. – Subfusc

@BrockAdams: thanks for the information; this is exactly why this approach is an unreliable hack. – Subfusc

a.toString().substring(15, a.toString().length-4) also works, and doesn't need to scan the entire string (although it most likely will and the counting makes it another scan anyway. Oh wel.) – Payson

Extremely handy. I'm using it for (Jasmine) unit tests, but avoiding it for production code. – Nebula

@Jason: I don't know if that's a good idea, even for testing. Your test environment might also evolve and drop this accidental feature. Please reconsider. This post is for entertainment purposes only.... – Subfusc

My Heredoc works in my Fx and Chrome on Mac: DEMO – Metathesize

You just made it easy for me to add huge html blocks to my QUnit tests! I am now creating a StaticStrings object in my test class that holds a bunch of these strings. – Isolating

Its was failed when I have </script> literal inside the comments. – Fluorosis

Syntax become ugly when you need to pass variables inside long multi-line text. Or you have to replace strings several times. – Etch

Even simpler hereDoc(() => {/*! Theirs not to make reply, Theirs not to reason why, Theirs but to do and die */}); – Landin

@fforw, It's pretty neat actually, if only its implementation independent. – Siberia

You don't need regex for this: function hereDoc(f) { var fs = ''+f; return fs.substring(fs.indexOf("/*!")+3, fs.lastIndexOf("*/")); } – Bloodroot

@JamesWilkins: indeed you don't. In fact, you don't even should use this solution in the first place – Subfusc

I know, just making the answer a bit more complete for new people finding it. ;) – Bloodroot

Have yet to encounter an instance where this doesn't work properly in back end applications, from node 0.0.10 to 10.0.0 so far. Albeit not using regex, using let start = f.toString().indexOf('/*')+2 to let end = f.indexOf('*/')-start and substring operation. It's also great since you can precompile text blocks from required files into cache on app launch with this approach. – Pedalfer

@hajikelist: you should really be using template strings by now (node >= 4.0.0). – Subfusc

@Auteur - well - of course I'm using templates strings wherever possible. There is a case for using these with custom mysql scripts [for prep statements of course] containing tons of backticks. I still don't think this approach is as bad as some of these overly dramatic responses make it out to be. This has literally worked everywhere I've had to try it for the last 7 or 8 years. Cheers. – Pedalfer

@Auteur On the matter of the .removeIndentation() method how about .replace(/^\s+(\S.*)/gm, "$1") – Barberabarberry

I'm not endorsing this solution, but just to be pedantic, the quantifiers in the regexp should be '*', not '+'. It's a moot point because current browsers will always return more than one character outside of the commented string (since the value of f.toString() includes the curly brackets etc.), but still. If the comment DID start at the beginning of the string for some reason, these patterns would fail unnecessarily. The art of regexps is to specify /exactly/ what you mean, so this kind of imprecision is unsightly. [adjusts monocle] – Plumbum

How does one escape the */ comment delimiter if it were to occur inside of the string? – Counterinsurgency

Answer 5

You can do this...

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

Fireplug

First example is great and simple. Much better than the \ approach as I'm not sure how browser's would handle the backslash as an escape character and as a multi-line character. – Unaunabated

The CDATA code (E4X) is obsolete and will soon stop working even in Firefox. – Yesima

e4x.js would be the good future-proof solution – Trapezium

Answer 6

I came up with this very jimmy rigged method of a multi lined string. Since converting a function into a string also returns any comments inside the function you can use the comments as your string using a multilined comment /**/. You just have to trim off the ends and you have your string.

var myString = function(){/*
    This is some
    awesome multi-lined
    string using a comment 
    inside a function 
    returned as a string.
    Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)

alert(myString)

Niobous

This is absolutely terrifying. I love it (although you may need to do a regex match because I'm not sure how precise the whitespace for toString() is. – Krigsman

This solution does not seem to work in firefox, maybe it's a security feature for the browser? EDIT: Nevermind, it only does not work for Firefox Version 16. – Dogtooth

Also beware of minifiers that strip comments... :D – Inadvertent

@KevinCox you could use trim(). – Acidic

@JosuaSchmid That will only handle the whitespace before and after, It won't handle things like function ( ) { .... But it may be sufficient. – Krigsman

@KevinCox Thats true. Since I'm using coffeescript, it ends up in a combination: ###).toString().slice(13,-1).trim().slice(2,-2) – Acidic

Why are 14 and -3 the parameters passed to slice? – Disseisin

This is why we can't have nice things. – Lowery

You can do some weird stuff in javascript land. Though in all honesty, you should never use this. – Niobous

How does one escape the */ comment delimiter if it were to occur inside of the string? – Counterinsurgency

Answer 7

I'm surprised I didn't see this, because it works everywhere I've tested it and is very useful for e.g. templates:

<script type="bogus" id="multi">
    My
    multiline
    string
</script>
<script>
    alert($('#multi').html());
</script>

Does anybody know of an environment where there is HTML but it doesn't work?

Desertion

Anywhere you don't want to put your strings into seperate and distant script elements. – Payson

A valid objection! It isn't perfect. But for templates, that separation is not only ok, but perhaps even encouraged. – Matti

I prefer splitting everything over 80/120 characters into multiline, I'm afraid that's more than just templates. I now prefer 'line1 ' + 'line2' syntax. It's also the fastest (although this might rival it for really large texts). It's a nice trick though. – Payson

actually, this is HTML not Javascript :-/ – Gnostic

however, the task of obtaining a multiline string in javascript can be done this way – Experientialism

@Peter, you can also make an AJAX request for a text file with newlines in it. – Despinadespise

But what happens when someone is using a JavaScript minifier? – Professor

I don't think e.g. webpack will ever look at <script> tags embedded in HTML. – Matti

Love this solution. Very clean. – Hatchet

Yes I prefer this one. Multiline text is data, which should be in a document, not in JS. And I hate hidden divs, they tend to clutter. btw you can leave out the type attribute it is not needed. – Hippo

Answer 8

I solved this by outputting a div, making it hidden, and calling the div id by jQuery when I needed it.

e.g.

<div id="UniqueID" style="display:none;">
     Strings
     On
     Multiple
     Lines
     Here
</div>

Then when I need to get the string, I just use the following jQuery:

$('#UniqueID').html();

Which returns my text on multiple lines. If I call

alert($('#UniqueID').html());

I get:

Enumeration

Thanks for this! It's the only answer I've found that solves my problem, which involves unknown strings that may contain any combination of single and double quotes being directly inserted into the code with no opportunity for pre-encoding. (it's coming from a templating language that creates the JS -- still from a trusted source and not a form submission, so it's not TOTALLY demented). – Elodiaelodie

This was the only method that actually worked for me to create a multi-line javascript string variable from a Java String. – Reiter

this gets the work done for me, although it doesnot solve multiline string values assignment to javascript variables – Gnarl

What if the string is HTML? – Creeper

$('#UniqueID').content() – Metathesize

@TomBeech, Interesting idea, but there's a limitation: you can't put a variable within it. The only stopgap is to do ugly search-and-replace. – Siberia

Just be warned that search engines do still index content in hidden DIVs. – Kavita

@Gavin, Are u sure about that? Especially that we have already set it to display:none? – Siberia

@Siberia Everything I've read, from Google as well as other sites, says that nowadays Google does index display:none content, most likely due to the popularity of JavaScript-styled front-ends. (For example, an FAQ page with hide/show functionality.) You need to be careful though, because Google says they can punish you if the hidden content appears to be designed to artificially inflate your SEO rankings. – Kavita

Answer 9

There are multiple ways to achieve this

1. Slash concatenation

  var MultiLine=  '1\
    2\
    3\
    4\
    5\
    6\
    7\
    8\
    9';

2. regular concatenation

var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';

3. Array Join concatenation

var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');

Performance wise, Slash concatenation (first one) is the fastest.

Refer this test case for more details regarding the performance

Update:

With the ES2015, we can take advantage of its Template strings feature. With it, we just need to use back-ticks for creating multi line strings

Example:

 `<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

Blameless

I think it's that you've just regurgitated what has already on the page for five years, but in a cleaner way. – Solipsism

won't slash concatenation also include the whitespace in beginning of lines? – Barbellate

Answer 10

Using script tags:

• add a <script>...</script> block containing your multiline text into head tag;

• get your multiline text as is... (watch out for text encoding: UTF-8, ASCII)

  <script>
  
      // pure javascript
      var text = document.getElementById("mySoapMessage").innerHTML ;
  
      // using JQuery's document ready for safety
      $(document).ready(function() {
  
          var text = $("#mySoapMessage").html(); 
  
      });
  
  </script>
  
  <script id="mySoapMessage" type="text/plain">
  
      <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:typ="...">
         <soapenv:Header/>
         <soapenv:Body>
            <typ:getConvocadosElement>
               ...
            </typ:getConvocadosElement>
         </soapenv:Body>
      </soapenv:Envelope>
  
      <!-- this comment will be present on your string -->
      //uh-oh, javascript comments...  SOAP request will fail 
  
  
  </script>
  

Suh

I think this strategy is clean & far underused. jsrender uses this. – Abolition

I'm using this with innerText iso innerHTML, But how do I make sure that the whitespaces are preserved ? – Erlineerlinna

Also ajax queries in case you are using them. You can try to change your headers xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); I don't remember having other problems than mistyping comments in JS. Spaces where no problems. – Suh

Answer 11

A simple way to print multiline strings in JavaScript is by using template literals(template strings) denoted by backticks (` `). you can also use variables inside a template string-like (` name is ${value} `)

You can also

const value = `multiline`
const text = `This is a
${value}
string in js`;
console.log(text);

Mavilia

Answer 12

I like this syntax and indendation:

string = 'my long string...\n'
       + 'continue here\n'
       + 'and here.';

(but actually can't be considered as multiline string)

Realize

I use this, except I put the '+' at the end of the preceding line, to make it clear the statement is continued on the next line. Your way does line up the indents more evenly though. – Anaglyph

@Anaglyph i use this too, and i still prefer put the '+' at the beginning of each new line added, and the final ';' on a new line, cuz i found it more 'correct'. – Jany

putting the + at the beginning allows one to comment out that line without having to edit other lines when its the first/last line of the sequence. – Workhorse

I prefer the + at the front too as visually I do not need to scan to the end of the line to know the next one is a continuation. – Anacrusis

Answer 13

Downvoters: This code is supplied for information only.

This has been tested in Fx 19 and Chrome 24 on Mac

DEMO

var new_comment; /*<<<EOF 
    <li class="photobooth-comment">
       <span class="username">
          <a href="#">You</a>:
       </span>
       <span class="comment-text">
          $text
       </span> 
       @<span class="comment-time">
          2d
       </span> ago
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
document.querySelector("ul").innerHTML=new_comment.replace('$text','This is a dynamically created text');

<ul></ul>

Metathesize

That's horrific. +1. And you can use document.currentScript instead of getElement... – Hollenbeck

currentScript ? In what browsers? My answer is more than 2 years old :) – Metathesize

But it was a unique answer. I'm actually writing a polyfill now, but mainly because jsfiddle loads your script inline. I want to code the *interpolation –– (abandoning #{} because ES7 decrees ${this.var}. – Hollenbeck

jsfiddle Implemented with interpolation of local variables, unlimited unique HEREDOCs, method adaptable for function(){/*! style HEREDOC aswell. Abbreviated usage: HEREDOC="EOF";/*!EOF ... EOF*/ currentScript().split(HEREDOC)[2]; – Hollenbeck

Undefined "you" in chrome for osx – Metathesize

jsfiddle-fixed - I must have had "you" defined globally in my console. Works now (chrome/osx). The nice thing about adding the comment to a var is that you're not in a function context, jsfiddle-function-heredoc although the function thing would be cool for class methods. might be better to pass it a replace { this: that } object anyways. fun to push something crazy to the limit anyway :) – Hollenbeck

Forget the haters. This is the only correct answer bar ES6. All the other answers require concatenation, computation of some sort, or escaping. This is actually pretty cool and I'm going to use it as a way to add documentation to a game I'm working on as a hobby. As long as this trick isn't used for anything that could invoke a bug (I can see how someone would go "Semicolon, derp. Lets put the comment on the next line." and then it breaks your code.) But, is that really a big deal in my hobby game? No, and I can use the cool trick for something useful. Great answer. – Almallah

Still shows undefined throughout the text for me - Chrome/OSX. – Knowledge

I will look when I get to an iMac end of this week – Metathesize

I've never been brave enough to use this technique in production code, but where I DO use it a lot is in unit testing, where often it's easiest to dump the value of some structure as a (quite long) string and compare it to what it 'should' be. – Thoreau

Answer 14

There's this library that makes it beautiful:

https://github.com/sindresorhus/multiline

Before

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1>❤ unicorns</h1>' +
'   </body>' +
'</html>' +
'';

After

var str = multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/});

Paradigm

This support in nodejs, using in browser must becareful. – Berm

@HueiTan Docs state it also works in the browser. Which makes sense - it's just Function.prototype.String(). – Marelda

ya but it said "While it does work fine in the browser, it's mainly intended for use in Node.js. Use at your own risk.While it does work fine in the browser, it's mainly intended for use in Node.js. Use at your own risk." (Just becareful XD) – Berm

@HueiTanYep I read that part. But Function.prototype.toString() is pretty stable and well known. – Marelda

Best answer for me because it at least achieves multiline without all the rubbish in the middle(The rubbish at the beginning and ends I can deal with). – Omnivorous

Answer 15

Found a lot of over engineered answers here. The two best answers in my opinion were:

1:

 let str = `Multiline string.
            foo.
            bar.`

which eventually logs:

Multiline string.
           foo.
           bar.  

2:

let str = `Multiline string.
foo.
bar.`

That logs it correctly but it's ugly in the script file if str is nested inside functions / objects etc...:

Multiline string.
foo.
bar.

My really simple answer with regex which logs the str correctly:

let str = `Multiline string.
           foo.
           bar.`.replace(/\n +/g, '\n');

Please note that it is not the perfect solution but it works if you are sure that after the new line (\n) at least one space will come (+ means at least one occurrence). It also will work with * (zero or more).

You can be more explicit and use {n,} which means at least n occurrences.

Cryptography

Why wouldn't you just [ "line", "line2", "line3" ].join("\n"). – Coeliac

Answer 16

The equivalent in javascript is:

var text = `
This
Is
A
Multiline
String
`;

Here's the specification. See browser support at the bottom of this page. Here are some examples too.

Mythologize

Answer 17

Exact

Ruby produce: "This\nIs\nA\nMultiline\nString\n" - below JS produce exact same string

text = `This
Is
A
Multiline
String
`

// TEST
console.log(JSON.stringify(text));
console.log(text);

This is improvement to Lonnie Best answer because new-line characters in his answer are not exactly the same positions as in ruby output

Langobard

text is string why json.stringify? – Jerryjerrybuild

@Jerryjerrybuild this is only for test - to see where are exactly new-line characters \n (to compare with ruby output (working example linked in answer) ) - this is improvement of Lonnie answer because new-line characters in his answer are not exactly the same positions as in ruby output – Porush

Answer 18

This works in IE, Safari, Chrome and Firefox:

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

Diocese

Just think about it. Do you think it's valid? Don't you think it can cause display problems? – Finder

Why the downvotes? This is a creative answer, if not very practical! – Lightning

no, it's not. One should rather use templates: $.tmpl() (api.jquery.com/tmpl), or EJS (embeddedjs.com/getting_started.html), etc. One reason for downvotes is that it's really far from a valid code and using this can cause huge display problems. – Finder

I hope no one ever uses this answer in practice, but it's a neat idea – Sukiyaki

Edge case when you have ' within the html. in that case you may have to use html entities '. – Pedicel

Answer 19

to sum up, I have tried 2 approaches listed here in user javascript programming (Opera 11.01):

• this one didn't work: Creating multiline strings in JavaScript
• this worked fairly well, I have also figured out how to make it look good in Notepad++ source view: Creating multiline strings in JavaScript

So I recommend the working approach for Opera user JS users. Unlike what the author was saying:

It doesn't work on firefox or opera; only on IE, chrome and safari.

It DOES work in Opera 11. At least in user JS scripts. Too bad I can't comment on individual answers or upvote the answer, I'd do it immediately. If possible, someone with higher privileges please do it for me.

Felsite

This is my first actual comment. I have gained the upvote privilege 2 days ago so so I immediately upvoted the one answer I mentioned above. Thank you to anyone who did upvote my feeble attempt to help. – Felsite

Thanks to everyone who actually upvoted this answer: I have now enough privileges to post normal comments! So thanks again. – Felsite

Answer 20

My extension to https://mcmap.net/q/40384/-creating-multiline-strings-in-javascript. It expects comment in a form /*! any multiline comment */ where symbol ! is used to prevent removing by minification (at least for YUI compressor)

Function.prototype.extractComment = function() {
    var startComment = "/*!";
    var endComment = "*/";
    var str = this.toString();

    var start = str.indexOf(startComment);
    var end = str.lastIndexOf(endComment);

    return str.slice(start + startComment.length, -(str.length - end));
};

Example:

var tmpl = function() { /*!
 <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    </ul>
 </div>
*/}.extractComment();

Ignatzia

Answer 21

Updated for 2015: it's six years later now: most people use a module loader, and the main module systems each have ways of loading templates. It's not inline, but the most common type of multiline string are templates, and templates should generally be kept out of JS anyway.

require.js: 'require text'.

Using require.js 'text' plugin, with a multiline template in template.html

var template = require('text!template.html')

NPM/browserify: the 'brfs' module

Browserify uses a 'brfs' module to load text files. This will actually build your template into your bundled HTML.

var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');

Easy.

Marelda

Answer 22

If you're willing to use the escaped newlines, they can be used nicely. It looks like a document with a page border.

Foretell

Wouldn't this add extraneous blank spaces? – Buyers

@Buyers Yes, good observation. It's only good for strings which you don't care about white space, e.g. HTML. – Foretell

Answer 23

The ES6 way of doing it would be by using template literals:

const str = `This 

is 

a

multiline text`; 

console.log(str);

More reference here

Paraph

This answer is not only small, incomplete and bad formatted, but also doesn't add absolutely anything to the previous answers. Flagging it and hopping to be deleted. – Palestra

Answer 24

Easiest way to make multiline strings in Javascrips is with the use of backticks ( `` ). This allows you to create multiline strings in which you can insert variables with ${variableName}.

Example:

let name = 'Willem'; 
let age = 26;

let multilineString = `
my name is: ${name}

my age is: ${age}
`;

console.log(multilineString);

compatibility :

• It was introduces in ES6//es2015
• It is now natively supported by all major browser vendors (except internet explorer)

Check exact compatibility in Mozilla docs here

Nicollenicolson

Is this now compatible with all recent browsers? Or are there some browsers which still do not support this syntax? – Wildon

Sorry for my extreme late comment, edited the answer added compatibility info ;) – Nicollenicolson

Answer 25

You can use TypeScript (JavaScript SuperSet), it supports multiline strings, and transpiles back down to pure JavaScript without overhead:

var templates = {
    myString: `this is
a multiline
string` 
}

alert(templates.myString);

If you'd want to accomplish the same with plain JavaScript:

var templates = 
{
 myString: function(){/*
    This is some
    awesome multi-lined
    string using a comment 
    inside a function 
    returned as a string.
    Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)

}
alert(templates.myString)

Note that the iPad/Safari does not support 'functionName.toString()'

If you have a lot of legacy code, you can also use the plain JavaScript variant in TypeScript (for cleanup purposes):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

and you can use the multiline-string object from the plain JavaScript variant, where you put the templates into another file (which you can merge in the bundle).

You can try TypeScript at
http://www.typescriptlang.org/Playground

Raney

Any documentation on the iPad/Safari limitation? MDN seems to think it's all good - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Cheops

@Campbeln: CoWorker told me this (he used the code). Haven't tested it myselfs. Might also depend on the iPad/Safari version - so probably depends. – Raney

Answer 26

ES6 allows you to use a backtick to specify a string on multiple lines. It's called a Template Literal. Like this:

var multilineString = `One line of text
    second line of text
    third line of text
    fourth line of text`;

Using the backtick works in NodeJS, and it's supported by Chrome, Firefox, Edge, Safari, and Opera.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Bohon

Answer 27

You can use tagged templates to make sure you get the desired output.

For example:

// Merging multiple whitespaces and trimming the output

const t = (strings) => { return strings.map((s) => s.replace(/\s+/g, ' ')).join("").trim() }
console.log(t`
  This
  Is
  A
  Multiline
  String
`);
// Output: 'This Is A Multiline String'

// Similar but keeping whitespaces:

const tW = (strings) => { return strings.map((s) => s.replace(/\s+/g, '\n')).join("").trim() }
console.log(tW`
  This
  Is
  A
  Multiline
  String
`);
// Output: 'This\nIs\nA\nMultiline\nString'

Septillion

Answer 28

Also do note that, when extending string over multiple lines using forward backslash at end of each line, any extra characters (mostly spaces, tabs and comments added by mistake) after forward backslash will cause unexpected character error, which i took an hour to find out

var string = "line1\  // comment, space or tabs here raise error
line2";

Landin

Answer 29

Please for the love of the internet use string concatenation and opt not to use ES6 solutions for this. ES6 is NOT supported all across the board, much like CSS3 and certain browsers being slow to adapt to the CSS3 movement. Use plain ol' JavaScript, your end users will thank you.

Example:

var str = "This world is neither flat nor round. "+ "Once was lost will be found";

Carleencarlen

while i agree with your point, i wouldn't call javascript "good" ol – Dubrovnik

How does this admonition stand up in 2022? – Stork

It is the responsibility of the end user to keep their browser updated. It is the responsibility of the developer to code in the right way and make the product better. – Courtesan

Answer 30

Multiline string with variables

var x = 1
string = string + `<label class="container">
                       <p>${x}</p>
                   </label>`;

Tillman

Answer 31

My version of array-based join for string concat:

var c = []; //c stands for content
c.push("<div id='thisDiv' style='left:10px'></div>");
c.push("<div onclick='showDo(\'something\');'></div>");
$(body).append(c.join('\n'));

This has worked well for me, especially as I often insert values into the html constructed this way. But it has lots of limitations. Indentation would be nice. Not having to deal with nested quotation marks would be really nice, and just the bulkyness of it bothers me.

Is the .push() to add to the array taking up a lot of time? See this related answer:

(Is there a reason JavaScript developers don't use Array.push()?)

After looking at these (opposing) test runs, it looks like .push() is fine for string arrays which will not likely grow over 100 items - I will avoid it in favor of indexed adds for larger arrays.

Ace

Answer 32

You can use += to concatenate your string, seems like no one answered that, which will be readable, and also neat... something like this

var hello = 'hello' +
            'world' +
            'blah';

can be also written as

var hello = 'hello';
    hello += ' world';
    hello += ' blah';

console.log(hello);

Standoff

Answer 33

You have to use the concatenation operator '+'.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var str = "This "
                + "\n<br>is "
                + "\n<br>multiline "
                + "\n<br>string.";
        document.getElementById("demo").innerHTML = str;
     </script>
</body>
</html>

By using \n your source code will look like -

This 
 <br>is
 <br>multiline
 <br>string.

By using <br> your browser output will look like -

This
is
multiline
string.

Chinn

Answer 34

JavaScript never had a true good way to handle multiline strings, until 2015 when ES6 was introduced, along with template literals.

Template literals are strings delimited by backticks(``), instead of the normal single('')/doubl("")e quote delimiter.

Ween

I don't know why this was not selected as the correct answer! – Fiora

Answer 35

I think this workaround should work in IE, Chrome, Firefox, Safari, Opera -

Using jQuery :

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert($('#unique_id').html());
</script>

Using Pure Javascript :

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert(document.getElementById('unique_id').innerHTML);
</script>

Cheers!!

Betthel

<xmp> is so deprecated. It may be allowed in HTML, but should not be used by any authors. See #8308346 – Counterinsurgency

@Bergi, you are right.. and using <pre>; with escapes wont help in my solution.. I came across similar issue today and trying to figure out a workaround.. but in my case, I found one very n00bish way to fix this issue by putting output in html comments instead of <xmp> or any other tag. lol. I know its not a standard way to do this but I will work on this issue more tomorrow mornin.. Cheers!! – Betthel

Unfortunately even with style="display:none" Chrome tries to load any <img> images mentioned in the example block. – Pleven

Answer 36

Just tried the Anonymous answer and found there's a little trick here, it doesn't work if there's a space after backslash \
So the following solution doesn't work -

var x = { test:'<?xml version="1.0"?>\ <-- One space here
            <?mso-application progid="Excel.Sheet"?>' 
};

But when space is removed it works -

var x = { test:'<?xml version="1.0"?>\<-- No space here now
          <?mso-application progid="Excel.Sheet"?>' 
};

alert(x.test);​

Hope it helps !!

Mittel

well obviously if you have a space after a backslash, backslash escapes the space. It is supposed to escape linebreak, not space. – Bawl

Answer 37

This is one fairly economical approach, at least in terms of the source code:

function s() {
    var args = [],index;
    for (index = 0; index< arguments.length; index++) {
        args.push (arguments [index]);
    }
    return args.join ("\n");
}
console.log (s (
    "This is the first line",
    "and this is the second",
    "finally a third"
));

function s() {return arguments.join ("\n")} 

would be nicer of course if the "arguments" property were a proper array.

A second version might use "" to do the join for cases when you want to control the line breaks in a very long string.

Ohl

this works: function s() { return Array.prototype.join.call(arguments, '\n'); } – Cathedral

Answer 38

I program this way:

sys = {
    layout: null,
    makeLayout: function (obCLS) {
        this.layout = $('<div />').addClass('editor').appendTo($(obCLS)).append(

            /* Cargador */
            /* @this.layout.find('> div:nth-of-child(1)'); */
            '<div>' +
            '   <p>Seleccione la imagen que desea procesar.</p>' +
            '   <input type="button" value="Seleccionar" class="btn btn-xlarge btn-success" />' +
            '   <span></span>' +
            '</div>' +

            /* Cargador - Progreso */
            /* @this.layout.find('> div:nth-of-child(2)'); */
            '<div>' +
            '   <div>' +
            '       <div></div>' +
            '       <div>' +
            '           <div></div>' +
            '       </div>' +
            '   </div>' +
            '</div>' +

            /* Editor */
            /* @this.layout.find('> div:nth-of-child(3)');
             * @sidebar = this.layout.find('> div:nth-of-child(3) > div > div > div:nth-of-type(1)');
             * @body    = this.layout.find('> div:nth-of-child(3) > div > div > div:nth-of-type(2) > div'); */
            '<div>' +
            '   <div>' +
            '       <div>' +
            '           <div></div>' +
            '           <div>' +
            '               <div></div>' +
            '           </div>' +
            '       </div>' +
            '   </div>' +
            '</div>'
        );
    }
}

sys.makeLayout('#div');

Maximilien

that is horrendous, theres a reason people do NOT program that way – Shrike

Keep HTML where it should be. In the HTML document. Hide the HTML and use jQuery to show it when it's needed. Much cleaner and much more maintainable. – Barth

Yes, I want to apologize, 7 years have passed and I no longer program that way, clearly the html code must be in html or jsx and not inside javascript code. – Maximilien

Answer 39

I think I discovered another way to do it inline without any invasive syntax on every line. Use Javascript's ability to convert a function to string and create a multiline comment with the /**/ syntax then remove the "function() {/*\n" and "\n*/}".

var multiline = function(string) { return string.toString().replace(/(^[^\n]*\n)|(\n\*\/\})/g, ""); };

console.log(multiline(function() {/*
Hello world!
I'm a multiline string!

Tada!
*/}));

The only pitfall I can see in this is the syntax highlighting.

EDIT: Had I scrolled down a little more, I would have seen this answer doing exactly the same thing: https://mcmap.net/q/40384/-creating-multiline-strings-in-javascript

Linoel

Answer 40

If you happen to be running in Node only, you could use the fs module to read in the multi-line string from a file:

var diagram;
var fs = require('fs');
fs.readFile( __dirname + '/diagram.txt', function (err, data) {
  if (err) {
    throw err; 
  }
  diagram = data.toString();
});

Residue

Answer 41

The Rule is: when inside a string, use \n wherever you want a new line; you do not have to put a space before or after the \n, JavaScript's interpreter is smart enough to know how long the unprintable character representation is.

Inhalation

Answer 42

i found a more elegant solution, maybe a little non-topic related because it uses PHP, but im sure it will be useful and cuteness* for some of yours...

this javascript code should stay inside script tags

var html=<?php echo json_encode("

        <div class=container>
            <div class=area1>
                xxx
            </div>
            <div class=area2>
                ".$someVar."
            </div>
        </div>

"); ?>

in your output html you will see something like

var html="\r\n\r\n\t\t\t<div class=container>\r\n\t\t\t\t<div class=area1>\r\n\t\t\t\t\txxx\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=area2>\r\n\t\t\t\t\t44\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t";  

 

---

and et voilà!, it gives you code readability in your file.

pD: this sample uses json_encode() PHP function, but certainly there are function equivalents for ASP, Ruby and JSP langs.

pD: however, this solution have his limitations too, one of them is you cannot use javascript variables inside the encapsulated code.

Jany

I confess I have done this a number of times to get complex quoted strings into javascript, although I pre-prepare them. But you're wrong about not being able to use javascript variables, you could implement coffee-script style interpolations which look like #{this.example}, and replace using a .replace regex with a closure function. – Hollenbeck

Answer 43

It's not extremely elegant but it's clean enough for me:

var myString = "First line" + "\n";
var myString = myString + "Second line" + "\n";
var myString = myString + "Third line" + "\n";

Javed

You should use var myString += "Second line \n"; instead. MUCH cleaner. – Stockade

Actually, you should use myString += "Second line \n"; The var shouldn't be repeated. – Twopenny

use + only for concatenate strings. Not need declare all buffer for each line. Its horrorific. – Maximilien

Should I correct my answer or should I leave it there as a good example of how NOT to do things? If it's best for the people who learn JavaScript, I don't mind leaving it there as it is now. A few negative points can't hurt that much. – Javed