在 JavaScript 中，缺乏对多行字符串的原生支持长期以来一直是一个挑战。然而，随着 ES6 (ECMAScript 2015) 的出现，情况发生了巨大的变化。ES6 引入了字符串模板（template literals），为多行字符串提供了强大的支持，这对开发者来说是一个显著的提升。
在本文中，我们将探讨 JavaScript 中多行字符串处理的演变，看看 ES6 字符串模板如何彻底改变了开发者处理文本数据的方式。我们还将讨论管理多行字符串的各种策略，特别是对于那些仍需优先考虑旧浏览器兼容性的场景。
目录
- 方法 1：使用字符串模板
- 方法 2：使用反斜杠转义换行符
- 方法 3：将单个字符串拼接在一起。
方法 1：使用字符串模板
这种方法使用反引号来定界字符串，这与普通的单引号/双引号定界符不同。
示例： 此示例使用字符串模板来创建多行字符串。
GeeksforGeeks
How to create multi-line
strings in JavaScript?
Click on the button to
insert multiline text
function showMultiline() {
multilineString =
`
This is the heading
This is a paragraph. This uses
template literals that were
added in ES6 of JavaScript
`
document.querySelector(‘.multiline‘).innerHTML
= multilineString;
}
输出：
!How to create multi-line strings in JavaScript?
方法 2：使用反斜杠转义换行符
另一种可以用来创建多行字符串的方法是转义每一行的换行符。
示例： 此示例使用反斜杠转义换行符来创建多行字符串。
GeeksforGeeks
How to create multi-line
strings in JavaScript?
Click on the button to
insert multiline text
function showMultiline() {
multilineString =
" \
This is the heading
\
This is a paragraph \
This uses backslashes in place\
of new lines
\
"
document.querySelector(‘.multiline‘).innerHTML
= multilineString;
}
输出：
!How to create multi-line strings in JavaScript?
方法 3：将单个字符串拼接在一起。
最简单但繁琐的方法是将每一行作为一个字符串分开，并将其拼接成一个最终的字符串。
示例： 此示例通过拼接字符串来创建多行字符串。
GeeksforGeeks
How to create multi-line
strings in JavaScript?
Click on the button to
insert multiline text
function showMultiline() {
multilineString =
"" +
"This is the heading
" +
"This is a paragraph" +
"This uses simple concatenation " +
"of strings for every line
" +
""
document.querySelector(‘.multiline‘).innerHTML
= multilineString;
}
输出：