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: