在使用模板字符串的时候使用的是 '{{}}'形式进行书写，本文则向各位解密这么写的原因
初体验正则
首先要先明白正则表达式中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>