js模板字符串自定义类名_模板字符串原理,原生js实现字符串模板

在使用模板字符串的时候使用的是 '{{}}'形式进行书写，本文则向各位解密这么写的原因

初体验正则

首先要先明白正则表达式中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'

小试牛刀

也就是说，当你给你的正则加上括号进行匹配时可以为返回的值添加更多的项，明白了这个之后看下面的代码,注意看注释部分的结果

{{name}}

let tem = document.querySelector('#demotem').innerHTML

let reg = /{{(\w*)}}/

console.log(reg.exec(tem)); //打印出一个数组，第一项为{{name}} 第二项为name

步入正轨

接着我们再对其进行一个改造

{{name}}

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//直接将结果输在界面上

通过上面的代码我们可以看到字符串模板被替换为了我们想要的值，但只能匹配一次且并不完整 SO完善一下

完善一下

{{name}}

{{age}}

//加多一行

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 //直接将结果输在界面上

最后最后，封装一下

{{name}}

{{age}}

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

}