ES6的String.raw的原理實現(xiàn)
ES6版本相比于ES5增加了很多新的東西篓像,可以大大提升開發(fā)者的開發(fā)效率某抓。當然迄损,在用好這些新東西的同時坑质,探究其內(nèi)部實現(xiàn)原理能更好地幫助我們的視野和邏輯能力妈经。今天我們來看看ES6的原始字符串的知識淮野。
閱讀這篇文章你至少需要了解一下知識:
- ES6模板字符串
- 標簽函數(shù)
當然吹泡,如果你對以上知識還不太熟悉,可以花幾分鐘閱讀下MDN的模板字符串相關(guān)文檔爆哑。OK,Let's go!
開始String.raw
首先應(yīng)該明確一點:String.raw是官方提供的標簽函數(shù),類似于Python中的r前綴柱嫌,旨在更方便地得到獲取原始的模板字面量內(nèi)容。先來簡單看一下String.raw的用法
console.log(`\u00A9`); // ?
console.log(String.raw`\u00A9`); // \u00A9,注意第一個\是普通反斜杠
console.log(String.raw`\u00a9`.length); \\ 6
console.log(`first line\nsecond line`);
//first line
//second line
console.log(String.raw`first line\nsecond line`); // first line\nsecond line
通過例子我們可以看到屯换,在模板字符串前使用String.raw標簽函數(shù)可以將字符串中\(zhòng)n编丘、\t以及16進制表示的Unicode字符原樣返回瘪吏,即所謂原始字符串。
String.raw語法
String.raw`templateStr`
String.raw(callSite, ......substitutions)
參數(shù)
templateStr
ES6新增的模板字符串掌眠,可以包含占位符(${})
callSite
億個模板字符串的“調(diào)用點對象蕾盯,“,類似`{raw:'test'}`
substitutions
任意可選參數(shù)蓝丙,表示任意插值內(nèi)的值
返回值
返回給定模板字符串或傳入?yún)?shù)的字符串形式级遭,其中包含原始字符串
通常情況下我們都是搭配模板字符串來使用該標簽函數(shù),第二種調(diào)用方式是為了模擬其用法渺尘,引擎會在背后調(diào)用該標簽參數(shù)來完成對模板字符串的轉(zhuǎn)換挫鸽。
let name = "Bob";
console.log(String.raw`Hi\n${name}`);
// "Hi\bBob!"
//模擬`t${0}e${1}s${2}t`,也可以顯示調(diào)用標簽函數(shù)
String.raw({raw:"test"}, 0, 1, 2) // t0e1s2t
注意細節(jié)
-
只能顯式地獲取原始模板字符串內(nèi)容,而不是其轉(zhuǎn)換后的字符表示鸥跟。比如:
// 該示例不會顯示原始字符串 console.log(String.raw`first line second line`); // first line // second line
標簽函數(shù)目前不支持IE系列
原理實現(xiàn)
String.raw本質(zhì)上就是一個函數(shù)丢郊,只不過更多用來處理模板字符串,根據(jù)其第二種語法嘗試寫出其內(nèi)部實現(xiàn)原理如下:
String.raw = function(strings, ...values) {
if (typeof strings.raw == "undefined") {
throw "TypeError: Cannot convert undefined or null to object";
}
var output = "",
len = strings.raw.length - 1;
if (len < 0) {
return output;
}
for (var idx = 0; idx < len; idx++) {
output += strings.raw[idx] + (values[idx] ? values[idx] : "");
}
output += strings.raw[idx];
return output;
}
相關(guān)鏈接
End...