Skip to content
Related Articles
Open in App
Not now

Related Articles

How to create multi-line strings in JavaScript ?

Improve Article
Save Article
  • Last Updated : 12 Jan, 2023
Improve Article
Save Article

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?

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?

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?

How to create multi-line strings in JavaScript?


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!