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.


This post was published (and was last revised ) by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.