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.

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        Create multi-line strings 
    </title> 
</head> 
  
<body> 
    <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> 
</body> 
  
</html> 

Output:

Before clicking the button:
After clicking the button:

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.

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        Create multi-line strings 
    </title> 
</head> 
  
<body> 
    <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> 
</body> 
</html> 

Output:

Before Clicking the button:
After Clicking the button:

Method 3: Concatenating the individual strings together: The simplest, but the cumbersome way is separating each line as a string and concatenating into one final string.

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

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        Create multi-line strings 
    </title> 
</head> 
  
<body> 
    <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> 
</body> 
  
</html> 

Output:

Before Clicking the button:
After Clicking the button:

My Personal Notes

Recommended Posts: