How can I create a multiline string in JavaScript?

General Discussions
#1

In JavaScript, you can create a multiline string using template literals (enclosed in backticks `). Here’s the equivalent JavaScript code for your Ruby example:

let text = `
This
Is
A
Multiline
String
`;

This will create a multiline string in JavaScript similar to the one you have in Ruby.

#3

ECMAScript 6 (ES6) introduces a new type of literal called template literals, which can be multiline. Template literals are delimited by backticks (`).

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

It’s worth noting that while browser support for template literals is good, you can use transpilers to ensure compatibility with older browsers.

Original ES5 answer: JavaScript doesn’t have a here-document syntax. You can use the escape character \ to create a multiline string, but it’s not as clean as a here-document:

"foo \
bar"
#4

You can create multiline strings in pure JavaScript using a method based on the serialization of functions, which is implementation-dependent. While this method works in most browsers, there’s no guarantee it will continue to work in the future, so use it with caution.

Here’s how you can use this method to create multiline strings:

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


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

This method has been tested successfully in several browsers, including IE 4-10, Opera 9.50-12, Safari 4-6, Chrome 1-45, Firefox 17-21, and Rekonq 0.7.0-0.8.0. However, it is not supported in Konqueror 4.7.4.

Be careful with minifiers, as they tend to remove comments. To preserve comments, you can use a comment starting with /*! (like the one used in the example).

With ES6, you can use backticks for multiline strings, which is a more standard and reliable approach:

let foo = `
  bar loves cake
  baz loves beer
  beer loves people
`;

Additionally, you could create a string prototype method to remove indentation:

String.prototype.removeIndentation = function() {
  return this.replace(/^[ \t]+/gm, '');
};

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

This removeIndentation method would remove leading spaces and tabs from each line of the string.

#5

I’m surprised I didn’t see this earlier, as it works everywhere I’ve tested and is very useful, especially for templates:

Use the script id tag script id="multi" with type = "text/plain", then write your multi-lang string inside the script and close it.

open another script tag and add the below code snippet:

alert(document.getElementById('multi').textContent);

This approach uses a script tag with a non-standard type attribute (bogus in this case) and an id to store the multiline string. The content of the script tag can then be retrieved using JavaScript and used as needed.

I haven’t encountered any environment where this method doesn’t work with HTML, but it’s always a good idea to test in the specific environments you’re targeting to be sure.