JavaScript 模板字面量標籤

模板字面量是ES2015新增，最初稱作模板字串，現在統一改成模板字面量。

可以認為它是JavaScript字串的加強版本，更多內容可以參閱JavaScript 模板字面量一章節。

一.模板字面量標籤概念：

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

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

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

上面程式碼是一個簡單模板字面量的應用，內部巢狀有佔位符。

輸出結果符合預期，一切感覺都非常正常，其實可以往深層次中考慮。

其實這個模板字元前面有一個預設函式，模板字面量佔位符中的表示式的返回值和周邊的字串傳遞給這個預設函式，然後進行拼接操作，這就是預設獲取的模板字面量的最終值，此預設函式就是本文要介紹的模板字面量標籤。

於是如果一個模板字面量第一個反單引號前面具表示式，那麼此模板字面量就被稱為帶標籤的模板字面量，此表示式通常是一個函式，它會按照一定的規則接收模板字面量中的相關資料，然後進行處理。

二.模板字面量標籤規則：

下面通過一段程式碼例項進行詳細分析：

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

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

下面對字面量標籤進行一下分析：

（1）.字面量標籤通常是一個函式。

（2）.與其他函式的呼叫方式不同，直接將其放置於模板字面量前方即可，不需要使用小括號。

（3）.標籤的返回值可以根據需要在函式內自己定義。

掌握標籤使用的關鍵在於對標籤引數的理解，第一個引數是一個陣列，用於儲存佔位符兩側的字串，之後的引數儲存佔位符表示式返回值的值，為了方便，通常會利用剩餘運算子傳參，參閱JavaScript 剩餘運算子一章節。

下面對標籤的引數進行一下詳細分解：

1.第一個引數是陣列，儲存有模板字面量中佔位符兩側的字串。

   （1）.第一個元素是第一個反單引號與第一個佔位符之間的字串，所以是"本站的名稱是 "。

   （2）.第二個元素是第一個佔位符與第二個佔位符之間的字串，所以是" ，已經 "。

   （3）.第三個元素是第二個佔位符與最後一個反單引號之間的字串，所以是"歲了"。

特別說明：不要忽略空格，有幾個空格算幾個。

2.第一個引數之外的引數分別是佔位符的返回值，為了方便通常使用剩餘運算子表示，因為它數量不定。所以上述程式碼中，傳遞進來的分別是"螞蟻部落"和5。

三.字面量標籤簡單演示：

字面量前面有一個預設的標籤，它可以字串的拼接操作。

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

模板字串會傳遞給一個預設的標籤，然後完成拼接工作，我們也可以模擬實現預設標籤的功能。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName = '螞蟻部落';
let age = 5;

function myTag(literals, ...substitutions) {
    let result = "";
    for (let i = 0; i < substitutions.length; i++) {
        result += literals[i];
        result += substitutions[i];
    }
    result += literals[literals.length - 1];
    return result;
}
console.log(myTag`本站名稱是${ webName } ，已經${ age }歲了`);

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

上述程式碼模擬了模板字面量預設標籤的功能，實現了字串的拼接操作。

利用的是第一個陣列中元素和佔位符是相間的關係，也就是說第一個陣列元素後面必定是第一個佔位符返回值，第二個陣列元素後面必定是第二個站位符返回值，以此類推，直到最後一個陣列元素，它後面不可能再有佔位符，陣列元素數量比佔位符返回值數量永遠多一個。

上面只是在理論上介紹了模板字面量的標籤，如果要熟練應用於專案，還需要多加練習和參考大牛的程式碼，不過只要您掌握了它的原理，本文的目的也就達到了。