How to Create Multi-Line Strings in JavaScript?

In this article we look at ways to create multi-line strings in JavaScript. Since there are a lot of ways to do this, we will only be covering the methods that are simple, practical and non-hacky.

Using Template Literals

const str = `
<div>
    <span>Hello World!</span>
</div>
`;

Things to Consider:

• This is a new feature introduced in ECMAScript 6 (ES6); check for browser compatibility prior to using it. You could also use transpilers (such as BabelJs) to convert ES6 code into native JavaScript code for backward compatibility.
• Allows easy expression interpolation (i.e. embedding of expressions within normal strings), for example:

  const item1Price = 5;
  const item2Price = 10;
  
  const str = `
  <ul id="cart">
      <li>${item1Price}</li>
      <li>${item2Price}</li>
  </ul>
  `;
  

• Output will contain the whitespace/tabs etc. as they appear in your string.
• Within a backticked template it is simple to allow nested/inner backticks simply by using them inside a placeholder ${ } within the template.

There are a couple of other features introduced with template literals, but since they're out of the scope of this article, we will not be covering them.

Concatenating String Split Over Multi-lines Using the + Operator

const str = '<div>' +
                '<span>Hello World!</span>' +
            '</div>';

Things to Consider:

• It is the most common and backward compatible method to concatenate multi-line strings with all old and modern browsers supporting it.
• You could use single or double quotes for the strings and concatenate them using the + sign. Concatenation is made wherever you believe a newline must exist.
• Allows for easy variable substitution, for example:

  const item1Price = 5;
  const item2Price = 10;
  
  const str = '<ul id="cart">' +
                  '<li>' + item1Price + '</li>' +
                  '<li>' + item2Price + '</li>' +
              '</ul>';
  

Using the Addition Assignment Operator (+=)

This is the same as concatenating a string split over multi-lines using the + operator, for example:

let str =  '<div>';
    str +=     '<span>Hello World!</span>';
    str += '</div>';

It is recommended to use the + operator instead of using this technique.

Escaping Newlines

You can use escaped newlines (\) at the end of each line of string to make a multi-line concatenation, for example:

const str = '<div> \
                <span>Hello World!</span> \
             </div>';

Things To Consider:

• The output will contain the whitespace/tabs etc. as they appear in your string.
• Whitespace after the slash can be hard to notice and might lead to unexpected results.
• While most browsers support this, it is not a part of ECMAScript.

Using the concat() Method

The concat() method can also be used to join strings together by passing each string as an argument to the method, separated by a comma, like so:

const str = ''.concat(
    '<div>', 
        '<span>Hello World!</span>', 
    '</div>'
);

Since this adds the run-time complexity of a function, we would recommend you use other techniques.