模板引擎实现

模板引擎实现

let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';
let data = {
  name: '姓名',
  age: 18
}
render(template, data); // 我是姓名，年龄18，性别undefined

const render = (template, data) => {
    // 模板字符串正则
    const reg = /\{\{(\w+)\}\}/;

    // 如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

    // 判断模板里是否有模板字符串
    if (reg.test(template)) {
        // 注意上面的正则检索不是全局的（没有g），查找当前模板里第一个模板字符串的字段

        const name = reg.exec(template)[1];
        // 将第一个模板字符串渲染
        template = template.replace(reg, data[name]);

        // 递归的渲染并返回渲染后的结构
        return render(template, data);
    }
    return template; // 如果模板没有模板字符串直接返回
}