如何在 JavaScript 中创建多行字符串？
JavaScript 2015 不支持多行字符串，但是当 ES6 出现并引入字符串字面量时。 ES6 支持多行字符串。如果需要旧版浏览器支持，有多种方法可以处理多行字符串。
方法一：使用模板字面量创建多行字符串。与普通的单/双引号分隔符不同，字符串使用反引号分隔。
示例：此示例使用模板字面量来创建多行字符串。
<!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>
输出：
- 在点击按钮之前：
- 点击按钮后：
方法 2：使用反斜杠转义字面量换行符：可用于创建多行字符串的另一种方法是转义每行上的每个换行符。
示例：此示例使用反斜杠转义字面量换行符以创建多行字符串。
<!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>
输出：
- 单击按钮之前：
- 点击按钮后：
方法 3：将单个字符串连接在一起：最简单但麻烦的方法是将每一行分隔为一个字符串并连接成一个最终的字符串。
示例：此示例连接字符串以创建多行字符串。
<!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>
输出：
- 单击按钮之前：
- 点击按钮后：
