笙亿网络策划

JavaScript 多行字符串怎么写？

约 8 分钟读完 2 阅
文章导读
Previous Quiz Next 多行字符串 是跨越多行的 JavaScript 字符串。在程序中使用多行字符串可以更容易阅读和维护。在 JavaScript 中，创建多行字符串的最简单方法是使用 template literals（模板字符串）。template li
📋 目录
  1. 一 使用 Template Literals 创建多行字符串
  2. 二 使用 + 操作符创建多行字符串
  3. 三 使用 \ 运算符创建多行字符串
A A

JavaScript - 多行字符串

Previous
Quiz
Next

多行字符串 是跨越多行的 JavaScript 字符串。在程序中使用多行字符串可以更容易阅读和维护。在 JavaScript 中，创建多行字符串的最简单方法是使用 template literals（模板字符串）。template literals 在 ECMAScript 2015 (ES6) 中引入。在引入 template literals 之前，多行字符串是通过使用 + 操作符连接多个字符串来创建的。

在 JavaScript 中，字符串是包含字母、数字和特殊字符的字符序列。我们可以使用单引号 ('）、双引号 (") 或反引号 (`) 来创建字符串。

使用 Template Literals 创建多行字符串

template literals 是 JavaScript 中创建多行字符串的最佳方式。template literals 使用 反引号 (`) 包围。一个 template literal 包含 字符串 和 占位符。template literals 有时也被称为 template strings。

一个简单的 template literal 示例如下 − 

`This is a template literal enclosed by backtick characters.`

现在让我们使用 template literals 创建一个多行字符串 −

let multilineString = `This is a multiline
string created using
template literal.`

在上面的 JavaScript 代码片段中，我们创建了一个包含三行的多行字符串。我们将这个多行字符串赋值给名为 multilineString 的变量。

示例

在下面的示例中，我们使用 template literal 创建了一个多行字符串，并在 web 控制台中显示该字符串。

let mulString = `This is a multiline
string created using
template literal.`;
console.log(mulString);

输出

This is a multiline
string created using
template literal.

示例

在下面的示例中，我们尝试在网页上显示使用 template literal 创建的多行字符串。我们使用了 <br> 来换行。

<!DOCTYPE html>
<html>
<body>
   <p id = "output"></p>
   <script>
      let mulString = `This is a multine <br>
      string created using template literal <br>
      and displayed on the webpage.`;    
      document.getElementById("output").innerHTML = mulString;
   </script>
</body>
</html>

输出

This is a multine
string created using template literal
and displayed on the webpage.

使用 + 操作符创建多行字符串

我们也可以通过使用 + 操作符 连接单个字符串在 JavaScript 中创建多行字符串。要创建换行，我们可以使用转义字符 \n 或 <br>。

您可以连接使用单引号或双引号定义的字符串。

让我们看下面的示例 −

示例

在这个示例中，我们通过连接三个单个字符串创建了一个多行字符串。我们在单个字符串末尾使用了转义字符 (\n) 来换行。

let mulString = "This is a multiline string\n" +
"created by concatenating the individual strings\n" +
"and using \\n to break the line.";
console.log(mulString);

输出

This is a multiline string
created by concatenating the individual strings
and using \n to break the line.

示例

在下面的示例中，我们通过连接三个字符串创建了一个多行字符串。我们使用了 <br> 来换行。

<!DOCTYPE html>
<html>
<body>
   <p id = "output"></p>
   <script>
      let mulString = "This is a multiline string <br>" +
	   "created by concatenating the individual strings<br>" +
   	"and line break.";  
      document.getElementById("output").innerHTML = mulString;
   </script>
</body>
</html>

输出

This is a multiline string
created by concatenating the individual strings
and line break.

使用 \ 运算符创建多行字符串

我们可以使用 反斜杠 (\) 运算符在 JavaScript 中创建多行字符串。我们可以使用转义字符 (\n) 来换行。

示例

尝试以下 JavaScript 示例 −

let mulString = "This is a multiline string\n\
created using the backslash operator\n\
and escape character to break the line.";
console.log(mulString);

输出

This is a multiline string
created using the backslash operator
and escape character to break the line.

示例

在下面的示例中，我们使用反斜杠 (\) 运算符创建了一个多行字符串。为了换行，我们使用了 <br>。

<!DOCTYPE html>
<html>
<body>
   <p id = "output"></p>
   <script>
      let mulString = "This is first line of the multiline string <br>\
      This is second line of the multiline string <br> \
      This is the last line of multiline string.";    
      document.getElementById("output").innerHTML = mulString;
   </script>
</body>
</html>

输出

This is first line of the multiline string
This is second line of the multiline string
This is the last line of multiline string.