插值表达式解析原理
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 期待共同进步!