Javascript 简明教程

JavaScript - Multiline Strings

multiline string 是跨越多行的 JavaScript 字符串。在程序中使用多行字符串使其更易于阅读和维护。在 JavaScript 中，创建多行字符串最简单的方法是使用模板文字（模板字符串）。模板字符串在 ECMAScript 2015 (ES6) 中引入。在引入模板文字之前，多行字符串是通过使用 + 运算符连接多个字符串创建的。

A multiline string is a JavaScript string that spans multiple lines. Using multiline strings in programs make it easier to read and maintain. In JavaScript, the easiest way to create multiline strings is to use template literals (template strings). The template literals are introduced in ECMAScript 2015 (ES6). Before introduction of template literals, the multiline strings are created by concatenating multiple strings using + operator.

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

In JavaScript, a string is a sequence of characters containing alphabetical, numeric, and special characters. We can create the string using single quote ('), double quote (") or backtick (`) characters.

Creating Multiline Strings Using Template Literals

template literals 是在 JavaScript 中创建多行字符串的最佳方式。模板文字用 backtick (`) 字符括起来。模板文字包含字符串和占位符。模板文字有时也称为 template strings 。

The template literals are the best way to create multiline string in JavaScript. Template literals are enclosed with backtick (`) characters. A template literal contains strings and also placeholders. Template literals are sometimes also called template strings.

以下是模板文字的一个简单示例：

A simple example of a template literal is as follows −

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

现在我们使用模板文字创建多行字符串：

Let’s now create a multiline string using template literals −

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

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

In the above JavaScript code snippet, we have created a multiline string containing three lines. We assigned this multiline string to the variable called multilineString.

Example

在下面的示例中，我们已经使用模板文字创建了一个多行字符串并在 Web 控制台中显示了该字符串。

In the below example, we have created a multiline string using template literal and displayed the string in the web console.

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

This is a multiline
string created using
template literal.

Example

在下面的示例中，我们试图在网页上显示使用模板文字创建的多行字符串。我们使用 换行。

In the below example, we are trying to display the multiline string crated using the template literal on the webpage. We used to make a line break.

<!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.

Creating Multiline String Using + Operator

我们还可以通过使用 + operator 连接各个字符串在 JavaScript 中创建多行字符串。为了换行，我们可以使用转义字符 \n 或 。

We can also create a multiline string in JavaScript by concatenating the individual strings using + operator. To create a line break, we can use the escape character \n or .

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

You can concatenate the strings defined with single or double quotes.

让我们看看下面的示例：

Let’s have a look at the following example −

Example

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

In this example, we created a multiline string by concatenating three individual strings. We used escape character (\n) at the end of the individual strings to break the line.

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.

Example

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

In the example below, we created a multiline string by concatenating three strings. We used to break the line.

<!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.

Creating Multiline String Using \ Operator

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

We can use backslash (\) operator to create multiline strings in JavaScript. We can use the escape character (\n) to break the line.

Example

试试下面的 JavaScript 示例 −

Try the following JavaScript example −

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.

Example

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

In the example below, we have created a multiline string using the backslash (\) operator. And to make a line break, we used .

<!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.