JavaScript 2015不支持多行字符串, 但是当ES6出现并引入了字符串文字时。 ES6支持多行字符串。如果必须使用较旧的浏览器, 则有多种方法可以处理多行字符串。
方法1：多行字符串是通过使用模板文字来创建的。与普通的单/双引号定界符不同, 使用反引号对字符串进行定界。
例子：本示例使用模板文字来创建多行字符串。
<!DOCTYPE html>
< html >
< head >
< title >
Create multi-line strings
</ title >
</ head >
< body >
< h1 style = "color: green" >
lsbin
</ 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 >输出如下：
在单击按钮之前：
单击按钮后：
方法2：使用反斜杠转义文字换行符：可用于创建多行字符串的另一种方法是转义每行中的每个换行符。
例子：本示例使用反斜杠转义文字换行符以创建多行字符串。
<!DOCTYPE html>
< html >
< head >
< title >
Create multi-line strings
</ title >
</ head >
< body >
< h1 style = "color: green" >
lsbin
</ 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 >输出如下：
单击按钮之前：
单击按钮后：
方法3：将各个字符串串联在一起：最简单但麻烦的方法是将每一行分隔为一个字符串, 然后串联成一个最终的字符串。
例子：本示例将字符串连接起来以创建多行字符串。
<!DOCTYPE html>
< html >
< head >
< title >
Create multi-line strings
</ title >
</ head >
< body >
< h1 style = "color: green" >
lsbin
</ 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 >输出如下：
单击按钮之前：
单击按钮后：
