JavaScript String.raw()

模板字面量前面可以帶有標籤，此標籤通常是一個函式。

String.raw()就是JavaScript內建的標籤函式，本文將結合程式碼例項對其進行詳細分析。

關於模板字面量標籤更多內容可以參閱JavaScript 模板字面量標籤一章節。

一.用作模板字面量標籤：

首先從其方法名稱入手進行分析：

（1）.直接使用String（類）呼叫，說明這是一個靜態方法。

（2）.raw翻譯成漢語具有"原始的或者未加工的"意思。

顧名思義，此方法用來獲取模板字面量的原始字面量值，也就是未經加工的值。

什麼是未經加工的值，也就是它原本是什麼就是什麼，比如"\n"，一個換行符，經過加工了，它未加工的值就是一個反斜槓和字元"n"（原汁原味的字元），功能如同C#中@，下面通過一段程式碼例項演示一下它的功能：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
console.log(`螞蟻部落位於\n青島市南區`);
console.log(String.raw `螞蟻部落位於\n青島市南區`);

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

程式碼分析如下：

（1）.第一行程式碼，\n會被作為換行符處理，很明顯這是經過"加工"，並非它原汁原味的值。

（2）.第二行程式碼，通過String.raw進行處理後，\與n都恢復它本來面貌，原本表示什麼就是什麼，失去換行功能。

二.普通函式呼叫：

此方法不但可以作為模板字面量的標籤，也可以當做普通函式呼叫。

但是實際應用中幾乎沒有把他當做普通函式呼叫，通常只用作模板字面量標籤。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
String.raw(callSite, ...substitutions)

引數解析如下：

（1）.callSite：必須，模板字串的“呼叫點物件”，格式如{ raw: ['foo', 'bar', 'baz'] }。

（2）.substitutions：可選，任意個可選引數，表示模板字面量中佔位符的返回值。

很多朋友看到這裡，肯定感覺一頭霧水，下面通過程式碼例項進行一下解析。

[JavaScript] 純文字檢視 複製程式碼
String.raw`螞蟻部落 ${2+3}歲了`

此函式用作模板字面量標籤，等同於如下程式碼：

[JavaScript] 純文字檢視 複製程式碼
String.raw({raw: ["螞蟻部落 ", "歲了"]}, 5);

我們知道，模板字面量標籤的第一個引數是儲存佔位符兩側字串的陣列，後面引數則依次是字面量佔位符的返回值。如果將String.raw用作普通函式，那麼第一個引數是具有raw屬性的物件，此屬性指向一個陣列，此陣列與模板字面量標籤第一個引數相同，後面的引數與模板字面量標籤後面的引數相同。實際應用中完全沒有必要將其當做普通函式呼叫，將其用作模板字面量標籤即可，JavaScript引擎會幫你恰當的呼叫它。

三.一個常見的問題：

String.raw會將模板字面量中的字元轉換為其原始字面量值。

但是有時候它並沒有完成本職工作，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let str="螞蟻部落\n青島市南區";
console.log(String.raw`${str}`);

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

看起來結果並沒有達到預期，因為字串換行了，說明\n換行符生效了，難道此方法沒有生效。

其實並沒有，作為標籤的String.raw接收接收到的是佔位符中表示式的返回值，也就是說String.raw接收到的資料已經是換行符了，已經不是字串"\n"，已經闡述的很清楚了，不明白的可以再體味一下，也可在文章底部留言。