在使用模板字符串的時候使用的是 '{{}}'形式進行書寫，本文則向各位解密這么寫的原因
初體驗正則
首先要先明白正則表達式中exec的使用
例如：
let str = 'axu1997@qq.com'
let reg = /\w*[@]\w*\.\w*/
console.log(reg.exec(str)) //會得到一個數組第0項是"axu1997@qq.com"
接下來給他加個括號，將"qq"對應的部分給提取出來(在\w中加)
let str = 'axu1997@qq.com'
let reg = /\w*[@](\w*)\.\w*/
console.log(reg.exec(str)) //會得到一個數組第0項是"axu1997@qq.com",第一項是'qq'
console.log(reg.exec(str[1])) //'qq'
小試牛刀
也就是說，當你給你的正則加上括號進行匹配時可以為返回的值添加更多的項，明白了這個之后看下面的代碼,注意看注釋部分的結果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/template" id="demotem">
<h1>{{name}}</h1>
</script>
<script type="text/javascript">
let tem = document.querySelector('#demotem').innerHTML
let reg = /{{(\w*)}}/
console.log(reg.exec(tem)); //打印出一個數組，第一項為{{name}} 第二項為name
</script>
</html>
步入正軌
接着我們再對其進行一個改造
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<div id="demoBox"></div>
</head>
<body>
</body>
<script type="text/template" id="demotem">
<h1>{{name}}</h1>
</script>
<script type="text/javascript">
let tem = document.querySelector('#demotem').innerHTML
let reg = /{{(\w*)}}/
let user = {
name:'Monday'
}
let arr = reg.exec(tem)
let tem = tem.replace(arr[0],user[arr[1]]) //也就是將'{{name}}' 替換為 user[name]中的值
document.getElementById('demoBox').innerHTML = tem//直接將結果輸在界面上
</script>
</html>
通過上面的代碼我們可以看到字符串模板被替換為了我們想要的值，但只能匹配一次且並不完整 SO完善一下
完善一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<div id="demoBox"></div>
</head>
<body>
</body>
<script type="text/template" id="demotem">
<h1>{{name}}</h1>
<p>{{age}}</p> //加多一行
</script>
<script type="text/javascript">
let tem = document.querySelector('#demotem').innerHTML
let reg = /{{(\w*)}}/
let user = {
name:'Monday',
age:24 //加多一個屬性
}
let arr = []
while(arr = reg.exec(tem)){ //這里解釋下，將值賦給arr當arr存在，循環繼續
let tem = tem.replace(arr[0],user[arr[1]]) //將界面中所有符合這個規則的元素都替換
}
document.getElementById('demoBox').innerHTML = tem //直接將結果輸在界面上
</script>
</html>
最后最后，封裝一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<div id="demoBox"></div>
</head>
<body>
</body>
<script type="text/template" id="demotem">
<h1>{{name}}</h1>
<p>{{age}}</p>
</script>
<script type="text/javascript">
let user = {
name:'Monday',
age:"18"
}
//我們平常用字符串寫的就是這樣了吧
let html = template('demotem',user)
document.getElementById('demoBox').innerHTML = html
//下面是封裝的代碼
function template(id,obj){
let tem = document.getElementById(id).innerHTML
let reg = /{{(\w*)}}/
let arr = []
while( arr = reg.exec(tem) ){
tem = tem.replace(arr[0],obj[arr[1]])
}
return tem
}
</script>
</html>