ES6模板字串的原理
在ES5中經常會用到拼接字串,比如
let year = 3, pos = "前端";
"我已經有" + year + "年" + pos + "開發經驗了";
輸出結果是 => "我已經有3年前端開發經驗了"
複製程式碼
ES5中的拼接字串在實際使用中效率不高,可讀性極差;所以ES6對此作出了改進,推出了模板字串,以上的程式碼就變成了
let year = 3, pos = "前端";
`我已經有${year}年${pos}開發經驗了`
輸出結果是 => "我已經有3年前端開發經驗了"
複製程式碼
是不是特別好用,注意模板字串使用的是反引號(Tab鍵上邊那個) 那它的原理是什麼?是怎麼實現的?
// 定義一個字串
let year = 3, pos = "前端";
let str = "我已經有${year}年${pos}開發經驗了";
function replace(str){
// 原理是通過正則匹配,替換原字串中的變數
return str.replace(/\$\{([^}])\}/g,function(matched,key){
console.log(arguments) // arguments見下面
return eval(key)
})
}
console.log(replace(str)) => "我已經有3年前端開發經驗了"
// 字串repalce方法的arguments
{ '0': '${year}', // 大正則匹配項
'1': 'year', // 正則小分組匹配項
'2': 4, // 匹配項第一個元素在字串中的索引
'3': '我已經有${year}年${pos}開發經驗了' } // 原字串
{ '0': '${pos}',
'1': 'pos',
'2': 12,
'3': '我已經有${year}年${pos}開發經驗了' }
複製程式碼
總結
很多模板其實都是這個原理,比如handlebar的{{handlebar}}
, ejs的<%=ejs%>