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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
Output:
- Before Clicking the button:
- After Clicking the button:
Recommended Posts:
- JavaScript | multiline Property
- Displaying inline and multiline blocks of code using Bootstrap
- How to create a link in JavaScript ?
- How to create a style tag using JavaScript?
- Object.create( ) In JavaScript
- How to create hash from string in JavaScript ?
- How to create a custom callback in JavaScript?
- How to create two dimensional array in JavaScript?
- How to create a pop-up to print dialog box using JavaScript?
- How to create a function from a string in JavaScript ?
- Create a string with multiple spaces in JavaScript
- How to create an image element dynamically using JavaScript ?
- Create a comma separated list from an array in JavaScript
- How to create data grid for millions of rows in JavaScript ?
- JavaScript | Strings
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
