Creating Multiline Strings in JavaScript

Creating multiline strings in JavaScript

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"

What's the cleanest way to write a multiline string in JavaScript?

Almost identical to NickFitz's answer:

var str = [""
    ,"line 1"
    ,"line 2"
    ,"line 3"
].join("");
// str will contain "line1line2line3"

The difference, the code is slightly more maintainable because the lines can be re-ordered without regard to where the commas are. No syntax errors.

Creating multiline strings in JavaScript

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"

JavaScript Multiline String

If by 'multiline string' you mean a string containing linebreaks, those can be written by escaping them using \n (for newline):

var multilineString = 'Line 1\nLine 2';
alert(multilineString);
// Line 1
// Line 2

If you mean, how can a string be written across multiple lines of code, then you can continue the string by putting a \ backslash at the end of the line:

var multilineString = 'Line \
1\nLine 2';
alert(multilineString);
// Line 1
// Line 2

Declare a string var with multiple lines in JavaScript/jQuery

You can use \ to indicate that the line has not finished yet.

var h= '<label>Hello World, Welcome to the hotel</label> \
              <input type="button" value="Visit Hotel"> \
              <input type="button" value="Exit">';

Note: When you use \, the whitespace in the following line will also be a part of the string, like this

console.log(h);

Output

<label>Hello World, Welcome to the hotel</label>               <input type="button" value="Visit Hotel">               <input type="button" value="Exit">

The best method is to use the one suggested by Mr.Alien in the comments section, concatenate the strings, like this

var h = '<label>Hello World, Welcome to the hotel</label>' +
              '<input type="button" value="Visit Hotel">' +
              '<input type="button" value="Exit">';

console.log(h);

Output

<label>Hello World, Welcome to the hotel</label><input type="button" value="Visit Hotel"><input type="button" value="Exit">

How do I do a multi-line string in node.js?

node v4 and current versions of node

As of ES6 (and so versions of Node greater than v4), a new "template literal" intrinsic type was added to Javascript (denoted by back-ticks "`") which can also be used to construct multi-line strings, as in:

`this is a 
single string`

which evaluates to: 'this is a\nsingle string'.

Note that the newline at the end of the first line is included in the resulting string.

Template literals were added to allow programmers to construct strings where values or code could be directly injected into a string literal without having to use util.format or other templaters, as in:

let num=10;

console.log(`the result of ${num} plus ${num} is ${num + num}.`);

which will print "the result of 10 plus 10 is 20." to the console.

Older versions of node

Older version of node can use a "line continuation" character allowing you to write multi-line strings such as:

'this is a \
single string'

which evaluates to: 'this is a single string'.

Note that the newline at the end of the first line is not included in the resulting string.

---

Related Topics