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"> neveropen </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"> neveropen </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"> neveropen </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?
