JavaScript - 多行字串

多行字串是跨越多行的 JavaScript 字串。在程式中使用多行字串使其更易於閱讀和維護。在 JavaScript 中，建立多行字串最簡單的方法是使用模板字面量（模板字串）。模板字面量在 ECMAScript 2015 (ES6) 中引入。在引入模板字面量之前，多行字串是透過使用 + 運算子連線多個字串來建立的。

在 JavaScript 中，字串是由包含字母、數字和特殊字元的字元序列組成的。我們可以使用單引號 (')、雙引號 (") 或反引號 (`) 字元建立字串。

使用模板字面量建立多行字串

模板字面量是建立 JavaScript 多行字串的最佳方法。模板字面量用反引號 (`)括起來。模板字面量包含字串和佔位符。模板字面量有時也稱為模板字串。

模板字面量的一個簡單示例如下所示：

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

現在讓我們使用模板字面量建立一個多行字串：

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

在上面的 JavaScript 程式碼片段中，我們建立了一個包含三行的多行字串。我們將此多行字串賦值給名為multilineString的變數。

示例

在下面的示例中，我們使用模板字面量建立了一個多行字串，並在網頁控制檯中顯示該字串。

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

輸出

This is a multiline
string created using
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.

列印頁面