JavaScript 反引號模板字面量巢狀

JavaScript字串功能與其他程式語言相比功能比較弱，沒有換行和佔位符或者格式化等功能。

ES2015新增的模板字面量對JavaScript字串功能給予很大的提升，算是加強版本的字串。

原來普通字串物件屬性與方法模板字面量都可以正常使用，具體參閱JavaScript String 字串一章節。

本文通過程式碼例項介紹一下模板字面量之間的相互巢狀，可能這個知識點會被初學者忽略。

通過反單引號可以建立模板字面，程式碼例項如下：

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

通過反單引號建立一個模板字面量，模板字面量中可以插入${}站位符。

佔位符中可以是任意合法的JavaScript表示式，返回該表示式的值，與兩側字串拼接起來。

更多關於模板字面的知識可以參閱JavaScript 模板字面量一章節。

更多關於佔位符的知識可以參閱JavaScript ${}佔位符用法一章節。

其實模板字串中，還可以繼續巢狀模板字串，當然需要有一定的條件。

對於巢狀可能有兩種理解，一種是要列印出反引號，看如下程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let str=`\`需要在前面加反斜槓才能輸出`;
console.log(str);

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

上述程式碼能夠列印出反單引號，不要需要進行轉義，這也算是巢狀的一種理解。

本文索要介紹的反引號巢狀並不是上面這種，而是模板字面量中巢狀另一個模板字面量。

也就是說不是簡單要列印出反單引號，而是讓其保持模板字面量一切功能，看如下程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName="baidu";
let bigCompany=false;
let str=`${ bigCompany ? "螞蟻部落" :`${webName}`}`;
console.log(str);

上面程式碼只是一個隨意演示，沒有特別的用途，程式碼執行效果截圖如下：

程式碼分析如下：

（1）.最外層是一個模板字串，裡面通過${}佔位符進行一個邏輯判斷操作。

（2）.佔位符中，又巢狀了另一個模板字面量，此模板模板字面量與其他模板字面量功能完全相同。

也就是隻需在模板內的佔位符 ${ } 內使用它們，就可以很輕鬆的實現模板字面量的巢狀功能。

對巢狀簡單進行一下總結：

（1）.內部巢狀的模板字面量必須存在於${}佔位符中。

（2）.巢狀的模板字面量功能與非巢狀模板字面量完全一樣。