How to create multi-line strings in JavaScript? - GeeksforGeeks

22 Apr, 2019
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:
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?