How to create multi-line strings in JavaScript ?

0 0 1 minute read

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"> 
    zambiatek 
</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"> 
    zambiatek 
</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"> 
    zambiatek 
</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>