How to create multi-line strings in JavaScript ?

The multi-line strings were not supported by JavaScript 2015 but when ES6 came out and introduced string literals. The ES6 supports multi-line strings. There are various ways to handle multi-line strings if older browser support is essential. 

Method 1: Multiline-strings are created by using template literals. The strings are delimited using backticks, unlike normal single/double quotes delimiter. 

Example: This example uses template literals to create multi-line strings. 

html

<h1 style="color: green">
    GeeksforGeeks
</h1>

<b>
    How to create multi-line
    strings in JavaScript?
</b>

<div class="multiline"></div>

<p>
    Click on the button to
    insert multiline text
</p>

<button onclick="showMultiline()">
    Click here
</button>

<script type="text/javascript">
    function showMultiline() {
        multilineString =
            `<div>
                <h3>This is the heading</h3>
                <p>
                    This is a paragraph. This uses
                    template literals that were
                    added in ES6 of JavaScript
                </p>
            </div>`

        document.querySelector('.multiline').innerHTML
                = multilineString;
    }
</script>

Output:

How to create multi-line strings in JavaScript?

Method 2: Using the backslash to escape the literal newlines.

The other method that can be used to create multi-line strings is escaping every newline on each line. 

Example: This example uses the backslash to escape the literal newlines to create multi-line strings. 

html

<h1 style="color: green">
    GeeksforGeeks
</h1>

<b>
    How to create multi-line
    strings in JavaScript?
</b>

<div class="multiline"></div>

<p>
    Click on the button to
    insert multiline text
</p>

<button onclick="showMultiline()">
    Click here
</button>

<script type="text/javascript">
    function showMultiline() {
        multilineString =
            "<div> \
                <h3>This is the heading</h3> \
                <p>This is a paragraph \
                This uses backslashes in place\
                of new lines</p> \
            </div>"

        document.querySelector('.multiline').innerHTML
                = multilineString;
    }
</script>

Output:

How to create multi-line strings in JavaScript?

Method 3: Concatenating the individual strings together.

The simplest, but cumbersome way is separating each line as a string and concatenating it into one final string. 

Example: This example concatenates the string to create multi-line strings. 

html

<h1 style="color: green">
    GeeksforGeeks
</h1>

<b>
    How to create multi-line
    strings in JavaScript?
</b>

<div class="multiline"></div>

<p>
    Click on the button to
    insert multiline text
</p>

<button onclick="showMultiline()">
    Click here
</button>

<script type="text/javascript">
    function showMultiline() {
        multilineString =
            "<div>" +
                "<h3>This is the heading</h3>" +
                "<p>This is a paragraph" +
                "This uses simple concatenation " +
                "of strings for every line</p> " +
            "</div>"

        document.querySelector('.multiline').innerHTML
                = multilineString;
    }
</script>

Output:

How to create multi-line strings in JavaScript?