How To Create Multi-line Strings In JavaScript?

A quick review of most common and effective ways of creating multi-line strings in JavaScript

  • By Daniyal Hamid
  • March 08, 2019
  • Comments
In This Article

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.


Feel free to suggest more in the comments section below.