引言
嘿嘿，各位看官老爷们，最近是不是被面试搞得头昏脑胀？是不是感觉手写代码比相亲还难？别慌，今天咱就来聊聊面试常考的“手写模板编译”！这玩意儿听起来高大上，其实就是个纸老虎，一捅就破！💪
啥是模板编译？
咱先来个通俗易懂的解释：模板编译，就好比一个“翻译器”，把我们写的“模板”（比如 我是{{name}}，年龄{{age}} 这种）翻译成浏览器能看懂的“最终形态”（比如 我是张三，年龄18 这种）。
小Tips:
就像
vue挂载前要实例化的过程一样，模板编译也是先在内存中跑一遍哦~ 别忘了，内存才是真正的战场！ 🧠
为啥面试爱考它？
诶，这就不得不提一下面试官的小心思了：
- 正则功底： 模板编译离不开正则表达式，这玩意儿可是前端开发的“瑞士军刀”啊！🔪
- 字符串处理能力： 考察你对字符串
replace方法的熟练程度，看看你是不是“字符串大师”！👨🎨 - 逻辑思维：
while循环、递归，看看你的逻辑能力过不过关。🤔 - 深入理解框架： 像
Vue这样的框架，模板编译是基本功，面试官想看看你是不是“懂原理”！ 💡
小Tips:
百度作为搜索技术大厂，正则可是当家花旦，重要性堪比
git，你说它能不爱考你吗？ 🤷♀️
正则小课堂开课啦！
在正式“手撕”代码之前，咱得先掌握点“屠龙术”——正则表达式。别害怕，其实它没那么可怕！
-
一个字符：
1就匹配字符1，简单粗暴！ 😜 -
字符范围：
[0-9]匹配 0 到 9 之间的任意一个数字，一个顶十个！ 🔢 -
长度：
{10}表示匹配前面字符 10 次，不多不少刚刚好！ 📏 -
开头结尾：
^匹配字符串开头，$匹配字符串结尾，像个门卫，严格把关！ 👮 -
次数：
+匹配一次或多次，多多益善！ ➕*匹配零次或多次，有也行没有也行！ 🌟?匹配零次或一次，可有可无！ ❓
小Tips:
正则表达式匹配字符的时候，默认情况下是“贪婪模式”，也就是说，它会尽可能多地匹配。 😈
模板编译实战！
好啦，理论知识铺垫完毕，现在开始“手撕”代码啦！
我们的目标： 把像 我是{{name}},年龄{{age}}，性别{{sex}} 这样的模板，根据 person 对象里的数据，变成 我是张三,年龄18，性别男 这样的字符串。
代码如下：
let template = '我是{{name}},年龄{{age}}，性别{{sex}}'
let person = {
name: '张三',
age: 18,
sex: '男'
}
function compile(template, data) {
// 定义正则：匹配 {{}} 里面的内容
// {{([a-z]*)}}
// \{\{ 匹配 {{
// ([a-z]*) ()分组 匹配 小写字母 0到多个
// \}\} 匹配 }}
let reg = /\{\{([a-z]*)\}\}/
if (reg.test(template)) { // 如果模板中还有 {{}} 需要替换
let key = reg.exec(template)[1] // reg.exec() 执行匹配，返回一个数组，[1] 就是 ()分组里的值
let value = data[key] ? data[key] : ""; // 获取 data 中对应的值，如果不存在就为空
template = template.replace(reg, value) // 把匹配到的 {{key}} 替换成 value
return compile(template, data) // 递归调用 compile，继续处理下一个 {{}}
} else {
return template // 没有 {{}} 了，返回最终结果
}
}
console.log(compile(template, person))
代码详解：
-
定义正则：
let reg = /{{([a-z]*)}}/这个正则可以匹配{{name}}，并且把name提取出来。{{和}}是用来匹配{{和}}的，因为{和}在正则中是特殊字符，需要用 `` 转义。([a-z]*)用了括号()分组，可以提取括号里面的内容，也就是name、age等等。[a-z]*表示匹配小写字母，*表示匹配 0 个或多个。注意:里面也可以使用(\w+)
-
使用
reg.test(template)检查模板字符串是否有符合正则匹配的内容。 -
执行匹配：
reg.exec(template)执行正则匹配，返回一个数组，第一个元素是匹配到的字符串，第二个元素是分组捕获到的内容（也就是name,age等）。 -
获取数据：
let value = data[key]根据提取到的 key，从 data 对象中获取对应的值。 -
替换字符串：
template = template.replace(reg, value)把匹配到的{{name}}替换成data中对应的value。 -
使用递归函数:
compile(template, data)不断调用自身，直到没有符合正则匹配的内容为止，递归可以清晰的处理模板字符串中的每一个{{}}。
小Tips:
replace方法还可以传入一个回调函数哦，可以实现更复杂的替换逻辑，有兴趣的同学可以去研究一下~ 🤓递归其实就是一种更高级的循环，它把重复的逻辑“封装”到了函数自身里。 🔄
面试小贴士：
- 代码风格： 代码写得规范一点，加上注释，能让面试官眼前一亮！✨
- 边界处理： 考虑一下如果 data 里没有对应的 key，该怎么处理。
- 性能优化： 如果模板很大，可以考虑优化正则匹配和替换的效率。
- 多交流： 面试时，如果遇到问题，可以和面试官多交流，看看他想考察你哪方面的能力。
灵魂一问：不用递归，可以吗？
当然可以！你可以用 while 循环来代替递归，效果是一样的：
function compile(template, data) {
let reg = /{{([a-z]*)}}/;
while (reg.test(template)) {
let key = reg.exec(template)[1];
let value = data[key] ? data[key] : '';
template = template.replace(reg, value);
}
return template;
}
小Tips:
面试官的“灵魂一问”往往不是真的让你“必须用 XXX”，而是想看看你有没有其他思路，思维是否灵活！ 😉
总结
手写模板编译，其实就是考察你对正则、字符串处理和逻辑思维的掌握程度。掌握了以上这些，面试的时候就可以胸有成竹，不再慌张啦！ 💪
希望这篇“手撕”模板编译的博客对你有所帮助，祝你面试顺利，早日拿到心仪的 offer！🎉
最后，别忘了点个赞，收藏一下哦！ ❤️
