資訊專欄INFORMATION COLUMN
摘要：學(xué)習(xí)筆記字符串模板實(shí)例模板編譯先組成一個(gè)模板使用放置代碼使用輸出表達(dá)式。這被稱為標(biāo)簽?zāi)０骞δ堋Ｔ摂?shù)組的成員與數(shù)組完全一致參考引用字符串?dāng)U展
es6學(xué)習(xí)筆記-字符串模板_v1.0 實(shí)例：模板編譯
//先組成一個(gè)模板 var template = `
//這是編譯模板的函數(shù),將模板編譯寫js可運(yùn)行的腳本
function compile(template){
//正則規(guī)則,匹配<%=和%>之間的字符串,這個(gè)字符串里面包括零個(gè)或任意個(gè)字符(.+?),并且捕獲,全局匹配
var evalExpr = /<%=(.+?)%>/g;
//正則規(guī)則,匹配<%和%>之間的字符串,這個(gè)字符串里面包括1個(gè)或多個(gè)空白符或非空白符或者什么都沒(méi)有,并且捕獲,全局匹配
var expr = /<%([sS]+?)%>/g;
template = template
//先處理js表達(dá)式,將<%=和%>之間的字符串進(jìn)行替換
.replace(evalExpr, "`);
echo( $1 );
echo(`")
//然后再處理js代碼,將<%和%>之間的字符串進(jìn)行替換
.replace(expr, "`);
$1
echo(`");
//然后再用括號(hào)包起來(lái),注意里面有反引號(hào)
template = "echo(`" + template + "`);"; //注意這里已經(jīng)是被標(biāo)上了echo方法了,跟下面echo函數(shù)對(duì)應(yīng)
var script = //這里直接用反引號(hào)包起來(lái)
`(function parse(data){
var output = "";
function echo(html){ //聲明了echo函數(shù)
output += html;
}
${ template } //直接解析并且執(zhí)行里面的函數(shù),并且調(diào)用到上面設(shè)置的echo函數(shù)進(jìn)行處理
return output;
})`;
return script;
}
----------------------------------------------
//這是編譯函數(shù)處理后返回的script,變成了可執(zhí)行的js代碼
echo("//在使用的時(shí)候,先生成js代碼
var parse = eval(compile(template));
//然后執(zhí)行這個(gè)js代碼,其實(shí)就是將參數(shù)傳給編譯后的js代碼進(jìn)行運(yùn)行
console.log(parse({ supplies: [ "broom", "mop", "cleaner" ] }));
標(biāo)簽?zāi)０?/b>
模板字符串緊跟在一個(gè)函數(shù)名后面，該函數(shù)將被調(diào)用來(lái)處理這個(gè)模板字符串。這被稱為“標(biāo)簽?zāi)０濉惫δ埽╰agged template）。
標(biāo)簽?zāi)０迤鋵?shí)不是模板，而是函數(shù)調(diào)用的一種特殊形式?！皹?biāo)簽”指的就是函數(shù)，緊跟在后面的模板字符串就是它的參數(shù)。
alert`123` //alert是函數(shù)(也就是所謂的標(biāo)簽),`123`是模板字符串 // 等同于 alert(123)
"標(biāo)簽"的第一個(gè)參數(shù)是個(gè)數(shù)組，數(shù)組的內(nèi)容是模板字符串中除了大括號(hào)表達(dá)式以外的內(nèi)容。從第二個(gè)參數(shù)起就是大括號(hào)表達(dá)式計(jì)算的結(jié)果
//tag是一個(gè)自定義函數(shù)
let tag = function(stringArr, value1, value2){
console.log(stringArr); //[ "Hello ", " world ", "" ],是一個(gè)數(shù)組
console.log(value1);//15,是大括號(hào)運(yùn)算后的結(jié)果,即模板字符串解析后的結(jié)果,a+b =15
console.log(value2);//50,類似
}
let a = 5;
let b = 10;
//這個(gè)tag是一個(gè)函數(shù)
tag`Hello ${ a + b } world ${ a * b }`;
//根據(jù)tag函數(shù)分析的參數(shù),其實(shí)相當(dāng)于以前的這種傳參
tag(["Hello ", " world ", ""], 15, 50)
tag函數(shù)的第一個(gè)參數(shù)是一個(gè)數(shù)組，該數(shù)組的成員是模板字符串中那些沒(méi)有變量替換的部分，也就是說(shuō)，變量替換只發(fā)生在數(shù)組的第一個(gè)成員與第二個(gè)成員之間、第二個(gè)成員與第三個(gè)成員之間，以此類推。
tag函數(shù)的其他參數(shù)，都是模板字符串各個(gè)變量被替換后的值。由于本例中，模板字符串含有兩個(gè)變量，因此tag會(huì)接受到value1和value2兩個(gè)參數(shù)。
再看另外一個(gè)例子熟悉一下:
真正的參數(shù)還是會(huì)用arguments
需要了解第一個(gè)參數(shù)是數(shù)組的使用方式
let passthru = function(literals) {//這里是一個(gè)數(shù)組
let result = "";
let i = 0;
while (i < literals.length) { //通過(guò)遍歷這個(gè)數(shù)組
result += literals[i++];//這是保存非模板字符串的(大括號(hào)的)
//console.log(result); // 如果分別打印result就會(huì)發(fā)現(xiàn)他的過(guò)程
if (i < arguments.length) {//獲取模板字符串解析之后的真正參數(shù)
result += arguments[i]; //這是模板字符串解析之后的(大括號(hào)內(nèi)的內(nèi)容,即${total}之類的)
//console.log(result); // 如果分別打印result就會(huì)發(fā)現(xiàn)他的過(guò)程
}
}
return result;
}
let total = 30;
let msg = passthru`The total is ${total} (${total*1.05} with tax)`;
console.log(msg) // "The total is 30 (31.5 with tax)"
過(guò)濾HTML字符串，防止用戶輸入惡意內(nèi)容
let SaferHTML = function (templateData) {
let s = templateData[0];//先將大括號(hào)外的第一個(gè)元素保存起來(lái)(即真正的參數(shù)之前的數(shù)據(jù))
for (let i = 1; i < arguments.length; i++) { //對(duì)于大括號(hào)內(nèi)的進(jìn)行遍歷處理
let arg = String(arguments[i]);
// Escape special characters in the substitution.
s += arg.replace(/&/g, "&") //將處理完的模板字符串放回去返回結(jié)果里面
.replace(//g, ">");
}
//原例子的寫法不太清晰,我改一下
//在將大括號(hào)外的第二個(gè)元素保存到返回結(jié)果(即真正參數(shù)之后的數(shù)據(jù))
s += templateData[1];//
return s;
}
let sender = ""; // 惡意代碼
let message = SaferHTML`${sender} has sent you a message.
`;
console.log(message)
//返回 has sent you a message.
多語(yǔ)言轉(zhuǎn)換（國(guó)際化處理）。
i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// "歡迎訪問(wèn)xxx，您是第xxxx位訪問(wèn)者！"
String.raw()沒(méi)有詳細(xì)函數(shù)寫法,只是說(shuō)明一個(gè)用途
tag函數(shù)的第一個(gè)參數(shù)strings，有一個(gè)raw屬性，也指向一個(gè)數(shù)組。該數(shù)組的成員與strings數(shù)組完全一致
tag`First line
Second line`
function tag(strings) {
console.log(strings.raw[0]);
// "First line
Second line"
}
參考引用:
es6字符串?dāng)U展
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/86968.html
摘要：學(xué)習(xí)筆記字符串的擴(kuò)展字符的表示法允許使用的形式表示一個(gè)字符，但在之前，單個(gè)碼點(diǎn)僅支持到，超出該范圍的必須用雙字節(jié)形式表示，否則會(huì)解析錯(cuò)誤。返回布爾值，表示參數(shù)字符串是否在源字符串的頭部。，是引入了字符串補(bǔ)全長(zhǎng)度的功能。 es6學(xué)習(xí)筆記-字符串的擴(kuò)展_v1.0 字符的Unicode表示法 JavaScript 允許使用uxxxx的形式表示一個(gè)字符，但在 ES6 之前，單個(gè)碼點(diǎn)僅支持u00...
摘要：因?yàn)榧^函數(shù)本身沒(méi)有所以不可以當(dāng)作構(gòu)造函數(shù)，也就是說(shuō)，不可以使用命令，否則會(huì)拋出一個(gè)錯(cuò)誤。箭頭函數(shù)不可以使用對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。 es6學(xué)習(xí)筆記-箭頭函數(shù)_v1.0 箭頭函數(shù)使用方法 var f = v => v; //普通函數(shù)配合箭頭函數(shù)寫法,這里并且是傳參的 //相當(dāng)于 var f = function(v) { return v; }; /*-----------...
摘要：學(xué)習(xí)筆記數(shù)值的擴(kuò)展有一些不常用或者還不支持的就沒(méi)有記錄了總體來(lái)說(shuō)本篇只是一個(gè)備忘而已用來(lái)檢查一個(gè)數(shù)值是否為有限的。兩個(gè)新方法只對(duì)數(shù)值有效，非數(shù)值一律返回。參考引用數(shù)值擴(kuò)展 es6學(xué)習(xí)筆記-數(shù)值的擴(kuò)展 有一些不常用或者還不支持的就沒(méi)有記錄了,總體來(lái)說(shuō)本篇只是一個(gè)備忘而已 Number.isFinite(), Number.isNaN() Number.isFinite()用來(lái)檢查一個(gè)數(shù)值...
摘要：學(xué)習(xí)筆記頂層對(duì)象雖然是筆記但是基本是抄了一次大師的文章了頂層對(duì)象頂層對(duì)象，在瀏覽器環(huán)境指的是對(duì)象，在指的是對(duì)象。之中，頂層對(duì)象的屬性與全局變量是等價(jià)的。的寫法模塊的寫法上面代碼將頂層對(duì)象放入變量。參考引用頂層對(duì)象實(shí)戰(zhàn) es6學(xué)習(xí)筆記-頂層對(duì)象_v1.0 (雖然是筆記,但是基本是抄了一次ruan大師的文章了) 頂層對(duì)象 頂層對(duì)象，在瀏覽器環(huán)境指的是window對(duì)象，在Node指的是gl...
摘要：考慮到環(huán)境導(dǎo)致的行為差異太大，應(yīng)該避免在塊級(jí)作用域內(nèi)聲明函數(shù)。函數(shù)聲明語(yǔ)句函數(shù)表達(dá)式循環(huán)循環(huán)還有一個(gè)特別之處，就是循環(huán)語(yǔ)句部分是一個(gè)父作用域，而循環(huán)體內(nèi)部是一個(gè)單獨(dú)的子作用域。聲明一個(gè)只讀的常量。 es6學(xué)習(xí)筆記-let,const和塊級(jí)作用域_v1.0 塊級(jí)作用域 javascript 原來(lái)是沒(méi)有塊級(jí)作用域的,只有全局作用域和函數(shù)作用域 例子1 因?yàn)闆](méi)有塊級(jí)作用域,所以每次的i都是一...
閱讀 3630·2023-04-25 23:32
閱讀 2044·2019-08-30 15:55
閱讀 2659·2019-08-30 15:52
閱讀 3115·2019-08-30 10:54
閱讀 844·2019-08-29 16:16
閱讀 655·2019-08-29 15:09
閱讀 3659·2019-08-26 14:05
閱讀 1640·2019-08-26 13:22
