打赏

插值表达式解析原理

function render(template, data) {
                // 注意没有去掉插值表达式的两边的空格
                const reg = /\{\{(\w+)\}\}/; // 模板字符串正则
                // 如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。
                if (reg.test(template)) { // 判断模板里是否有模板字符串
                    console.log(reg.exec(template));
                    // 注意上面的正则检索不是全局的(没有g)
                    const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段
                    template = template.replace(reg, data[name]); // 将第一个模板字符串渲染
                    return render(template, data); // 递归的渲染并返回渲染后的结构
                }
                return template; // 如果模板没有模板字符串直接返回
            }
            
            let template = '我是{{name}},年龄{{age}},性别{{sex}}';
            let person = {
                name: '布兰',
                age: 12
            }
            let str = render(template, person); // 我是布兰,年龄12,性别undefined
            console.log(str);

 

posted @ 2021-04-14 09:34  孟繁贵  阅读(335)  评论(0编辑  收藏  举报
TOP