JavaScript 多行字串

隨著ES版本的更新，很多操作實現起來越來越輕鬆。

本文所要介紹的多行字串便是如此，ES2015之前實現多行字串稍微麻煩一點。

下面從ES低版本到高版本逐步介紹一下JavaScript如何實現多行字串。

一.ES2015之前：

不少初學JavaScript的朋友可能認為實現多行字串非常輕鬆。

就如同在聊天軟體聊天，點選一下回車實現字串換行，這樣就實現了多行字串效果。

這在JavaScript是行不通的，起碼在ES2015之前行不通，看如下程式碼例項：

[JavaScript] 純文字檢視 複製程式碼
var str="螞蟻部落，本站URI地址是
www.softwhy.com";

上面程式碼通過強行將一個字串分為兩行，然而事實是程式碼會報錯。

因為上述程式碼的目的是宣告一個字串，如果強行切開，那麼被解讀為兩個語句，明顯有語法錯誤。

有一個黑魔法可以消除上述錯誤，也就是在行尾新增反斜槓，程式碼修改如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var str="螞蟻部落，本站URI地址是\
www.softwhy.com";
console.log(str);

程式碼執行效果截圖如下：

通過在行尾新增反斜槓，可以實現程式碼上的換行操作，不會報錯。

特別說明：此種換行方式並非標準規定，也許是JavaScript的一個bug，所以不推薦使用。

雖然在程式碼上確實實現了換行，但是實際執行列印結果確實字串依然在一行顯示。

可以在字串需要換行的地方新增換行符解決此問題，程式碼修改如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var str="螞蟻部落，本站URI地址是\nwww.softwhy.com";
console.log(str);

程式碼執行效果截圖如下：

通過新增換行符實現了執行結果的換行。

二.ES2015之後：

新版本總是提供新功能優化就功能，當然ES2015也不例外。

新增的模板字面量極大提高了JavaScript中字串的相關功能，使字串換行也變得十分便利。

模板字面量使用反引號建立，可以認為它是之前字串的加強版本，本文只專注於多行字串的實現。

關於模板字面可以參閱JavaScript 模板字面量一章節，首先看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let str=`螞蟻部落，本站URI地址是www.softwhy.com`;
console.log(str);

程式碼執行效果截圖如下：

上面程式碼建立了一個模板字面量，表現與普通字串一樣，當然它的功能不止於此。

利用模板字面量可以非常輕鬆的實現換行，直接在程式碼中進行換行即可，程式碼修改如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let str=`螞蟻部落，本站URI地址是
www.softwhy.com`;
console.log(str);

程式碼執行效果截圖如下：

不用黑魔法也不實用換行符，只需要在程式碼中進行換行即可實現。

再特別說明一點，在模板字串中，空格總是會計算在內的，所以要注意換行的縮排。

看如下程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let str=`ant
    zone`;
console.log(str.length);

程式碼執行效果截圖如下：

字串的長度是12，由此可以說明換行後的空格等都是生效的。