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:
