在 JavaScript 編寫多行字串

Harshit Jindal 2023年10月12日
  1. 在 JavaScript 中串聯多行
  2. 使用\反斜槓字元轉義文字換行符
  3. 在 JavaScript 中使用模板文字建立多行字串
在 JavaScript 編寫多行字串

本教程介紹如何用 JavaScript 編寫多行字串。在 ES6 之前的時代,JavaScript 不直接支援多行字串。有幾種方法可以實現此目的,ES6 之前的方法還不太好,ES6 的方法是語法糖方法。我們將一一介紹所有這些方法。

在 JavaScript 中串聯多行

我們可以將字串分成多個子字串,然後使用+ 符號將它們連線在一起以獲得完整的單個字串。通過這種方式,我們可以將字串分成多行,然後將它們同時放入一個字串中。

const str = 'This is DelftStack' +
    ' We make cool How to Tutorials' +
    ' &' +
    ' Make the life of other developers easier.';

輸出:

"This is DelftStack We make cool How to Tutorials & Make the life of other developers easier."

在引入模板文字之前,這是最簡單且最有前途的寫多行字串的方法,但是此方法無法將形成的字串輸出為多行字串,必須通過在每行末尾附加一個\n 來實現。

使用\反斜槓字元轉義文字換行符

我們可以在每行的末尾新增反斜槓,以在雙引號/單引號內建立多行字串,因為此字元有助於我們轉義換行符。

const str = 'This is DelftStack \
We make cool How to Tutorials \
& \
Make the life of other developers easier.';

輸出:

"This is DelftStack We make cool How to Tutorials & Make the life of other developers easier."

因此,我們將字串寫成跨多行的形式,但又將統一的字串組合在一起,這有助於我們實現目標,正確的顯示輸出和程式碼的可讀性。但是並不總是希望我們可能希望即使顯示時也將它們實際上分成多行。這可以通過在 ES6 中使用模板文字來實現。

在 JavaScript 中使用模板文字建立多行字串

模板文字是 ES6 引入的一種新方法,它可以幫助我們藉助反引號(此字元`被稱為反引號)來編寫多行字串。到目前為止,這是最好的解決方案,因為它不僅允許我們編寫多行字串,而且還以完全相同的方式列印它們,這是任何早期方法都無法實現的。

var str = `This is DelftStack 
We make cool How to Tutorials 
& 
Make the life of other developers easier.
`

輸出:

This is DelftStack 
We make cool How to Tutorials 
& 
Make the life of other developers easier.
作者: Harshit Jindal
Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn

相關文章 - JavaScript String