插值表达式解析原理

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);

作者:孟繁贵 Email:meng010387@126.com 期待共同进步!

原文地址:https://www.cnblogs.com/mengfangui/p/14656399.html