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.
html
< 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 >
|
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" >
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 >
|
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" >
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 >
|
Output:
How to create multi-line strings in JavaScript?
Last Updated :
12 Jan, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...