JavaScript 模板字面量

JavaScript的字串功能與其他程式語言相比要孱弱很多。

比如ES5並不具有多行字串或者字串格式化等功能，ES2015通過模板字面對其進行了加強。

特別說明：模板字面量在早期的ES2015版本被稱作模板字串，這一點注意下。

一.ES5字串：

在此版本中，可以通過雙引號或者單引號建立字串，不能實現字串換行或者格式化等操作。

字串的拼接等操作稍顯繁瑣，看如下程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var webName="螞蟻部落";
var age=5;
var str="網站名稱是"+webName+",已經"+age+"歲了";
console.log(str);

上面程式碼通過雙引號建立字串，並且進行了字串拼接操作。

通過+運算子實現字串拼接操作，如果程式碼複雜，那麼將非常繁瑣。

二.模板字面量概念：

模板字面量是ES2015新增，通過反引號定義，程式碼例項如下：

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

上述程式碼定義一個模板字面量，將將其列印出來，如果想要在列印出反引號，則需要使用轉義字元。

此時和普通字串表現無異，前面已經提到過，模板字面是原有普通字串的加強，新增很多強力功能。

後面會分步通過程式碼例項對模板字串的主要功能進行詳細介紹，希望能夠給需要的朋友帶來幫助。

三.多行字串：

ES5實現多行字串稍微麻煩一些，必須通過換行符\n，看如下程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let web="本站url地址是\nwww.softwhy.com";
console.log(web);

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

通過在字串中插入換行符實現了字串的換行效果，使用模板字面量一切都很輕鬆。

上述程式碼修改如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let web=`本站url地址是
  www.softwhy.com`;
console.log(web);

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

使用反引號建立一個模板字面量，直接在程式碼中換行即可實現字串的換行操作。

還需要注意的是，模板字面量中的所有空格都會被算作最終字串的一部分。

關於多行字串的更多內容可以參閱JavaScript 多行字串一章節。

四.${}佔位符：

可以直接在模板字面量中插入佔位符${}。

佔位符就如同一個普通字串一樣，可以插入到字串中的任意位置。

大括號中可以是任何合法的表示式，並返回此表示式的值，通過佔位符可以實現靈活的拼接操作。

將前面用到過的程式碼例項修改如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName="螞蟻部落";
let age=5;
let str=`網站名稱是${webName},已經${age}歲了`;
console.log(str);

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

上述程式碼實現了輕鬆的字串拼接操作，遠比使用+更為簡單人性。

大括號中可以是任意合法表示式，所以大括號中的內容可以更為複雜一些。

對佔位符本文不做更多介紹，關於此概念更多內容參閱JavaScript ${} 佔位符一章節。

五.模板字面量其他內容：

除了前面介紹的關於模板字面量的內容之外，還有幾個很重要的概念需要介紹。

但是考慮到文章的篇幅文字，後面不再做介紹，可以參閱下面給出的相關內容的文章連結：

（1）.關於模板標籤可以參閱JavaScript 模板標籤一章節。

（2）.String.raw方法可以參閱JavaScript String.raw()一章節。