手写JS-字符串模板

前言：

ES6（ES2015）为 JavaScript 引入了许多新特性，其中与字符串处理相关的一个新特性——模板字面量，提供了多行字符串、字符串模板的功能，相信很多人已经在使用了。字符串模板的基本使用很简单，这里就来简单地通过正则表达式实现一个字符串模板。

字符串模板

语法：我是{{name}}，职业{{job}}，工资{{salary}},会自动读取当前上下里变量name、job、salary的值并填充上去。
相当方便,省去了拼接字符串导致的繁琐和易错，尤其是在DOM操作innerHTML里。

开搞

实现将字符串'我是{{name}}，职业{{job}}，工资{{salary}}'里的占位符用变量代替。

手写代码：

function render(template, data) {    
    const reg = /\{\{(\w+)\}\}/;     
    if (reg.test(template)) {        
        const name = reg.exec(template)[1];        
        template = template.replace(reg, data[name]);        
        return render(template, data); 
    }    
    return template; 
}

定义一个模板字符串正则/\{\{(\w+)\}\}/，匹配字符串中{{}}的内容，然后通过if判断模板里是否有字符串模板。
如果有，那么就查找模板里的第一个模板字符串字段，并将其渲染，用相应的值替代，并通过render函数递归的渲染返回渲染后的结构。
如果没有，那么直接返回模板字符串。

测试：

let template = '我是{{name}}，职业{{job}}，工资{{salary}}';
let person = { name: '阿巴', job: '前端', salary:30000};
console.log(render(template, person)); // 我是阿巴，职业前端，工资30000

结果：

这样，就成功实现通过正则表达式实现一个简单的字符串模板了。

总结

每天都在进步一点点......