How can I use linebreaks in javascript?

Question

This piece of code gives error:

var test = '1
2
3
4';

What if I want to nicely structure a code in javascript, like this:

var return = '
<div>
   content
</div>
';

How do I do that?

Do you merely want the string *declaration* to be multiline so that the code is readable, or do you also want the string *contents* to be multiline so that the string is readable when it is displayed as output? — apsillers, Aug 14 '13 at 18:20
@apsillers If the string is used to hold HTML, that might not matter (though in some cases it's a valid question) — Katana314, Aug 14 '13 at 18:22
Please consider that this is a duplicate before adding yet another answer. — Jason C, Aug 14 '13 at 18:47
@JasonC often, I think everyone's writing their answer simultaneously. When answer #6 starts writing, there are still no actual answers posted just yet. — Katana314, Aug 15 '13 at 00:10

score 2 · Accepted Answer · answered Aug 14 '13 at 18:18

2

It isn't possible to span lines like you have described.

If you use the + operator and close your strings you can do something like this:

var retVal = '<div>' +
                'content' +
             '</div>';

answered Aug 14 '13 at 18:18

dc5

12,341
2
35
47

Raoul George · Answer 2 · 2013-08-14T18:24:08.677

1

The reason your code throws an error is because Javascript uses automatic semicolon insertion

If you want to structure a large string in multiple lines you are better off doing something like this -:

var returnValue = '<div>' + 
                  'content' + 
                  '</div>';

edited Aug 14 '13 at 18:24

answered Aug 14 '13 at 18:18

Raoul George

2,807
1
21
25

stackErr · Answer 3 · 2013-08-15T15:06:24.940

1

if you want to write multi line JavaScript you can use \ or if you want line breaks you can use \n.

So something like this for multi-line:

var returnVal = '<div> \
                  content \
              </div>';

or if you want line breaks in the output of the string:

var reutrnVal = '<div> \n   content\n </div>'

or you can concatenate using '+':

var returnVal = '<div>' + 
'   content' + 
'</div>';

edited Aug 15 '13 at 15:06

answered Aug 14 '13 at 18:21

stackErr

4,130
3
24
48

score 0 · Answer 4 · edited May 23 '17 at 12:11

~~JavaScript doesn't allow literal line breaks in strings.~~ (Looks like that's wrong; see stackErr's answer, for example.) There are two semi-reasonable approaches: use the + operator (as others have suggested), or put your lines in array and then call join('\n') on the array:

var return = [
  '<div>',
  '  content',
  '</div>'
].join('\n');

The latter isn't really efficient, but that probably won't matter in most cases.

If you find you're doing this a lot (assembling many little HTML snippets programmatically), it would be worth looking into a template library such as Mustache.

score 0 · Answer 5 · answered Aug 14 '13 at 18:21

0

If you end a line with a \, then your string can continue on the next line.

var return = '\
<div>\
   content\
</div>\
';

answered Aug 14 '13 at 18:21

Katana314

8,429
2
28
36

score 0 · Answer 6 · answered Aug 14 '13 at 18:46

There's a nice trick for creating multi-line strings in JavaScript which don't involve escaping the line feeds for every line, described at http://tomasz.janczuk.org/2013/05/multi-line-strings-in-javascript-and.html. Basically, you'd define a function with only a comment containing the multi-line string you want, call toString on that function and strip out the comment, like in this example below:

var html = (function () {/*
  <!DOCTYPE html>
  <html>
    <body>
      <h1>Hello, world!</h1>
    </body>
  </html>
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

How can I use linebreaks in javascript?

6 Answers6