三种实现 JavaScript 模板引擎的方法

小伙伴们，相信即使你是经验丰富的开发者，也未必能很快的解决这道面试题。如果您想质疑这一说法，请继续阅读下去。,,最近，我的好朋友南希遇到了一个让她发疯的问题，面试官要求她现场实现一个JavaScript模板引擎。,很伤心，因为我的朋友只是在找工作，但面试官让她造一架飞机。,请向 String 对象添加一个 render(obj) 方法，它的作用是将字符串中的特定字符替换为obj的相应属性。,你一定用过nunjucks之类的模板引擎，题型和它的功能很像，请跟着我一起举个例子。,我可怜的朋友被要求实现这样的东西，它只是将 ${name} 替换为 {{name}} 而几乎没有别的。,看到这个面试题，我的第一反应是用正则表达式来解决。只要我们能提取出字符串中的具体字符（name、age、job.name），问题就迎刃而解了。,,太好了，我们得到了 name、age、job.name 变量。下面我们来看看这个正则表达式是什么意思，可以点这个链接：https://jex.im/regulex/#!flags=&re=%5C%24%5C%7B(%5B%5E%24%7B%7D%5D%2B)%5C%7D进行查看。,我们要关注 ([^${}]+)，这意味着至少有一个除 $、{、} 之外的字符。,,当我们得到name, age, job.name，如何关联到employee？,我们通过正则表达式实现了一个简单的模板引擎，请小伙伴们为自己打气。,朋友们，让我们回顾一下es6中模板字符串的基本用法。,模板字符串非常有用，它们允许我们在字符串中嵌入表达式。,,让我们再次学习如何使用 eval。,很神奇，就好像我们声明了三个变量name、age、job，我们可以随意打印出它们的值。,,有了这两个知识点，我们的第二个方案就出来了。,,给自己鼓掌，因为你已经用两种方式实现了一个精简版模板引擎。,虽然我们很少用到with关键字，但是可以用来解决这个问题。,这段代码的输出是什么？,,这与上面的代码几乎具有相同的效果，但更加简洁易懂。,好吧，我想你已经猜到了答案。,以上就是我今天跟你分享的3种JavaScript模板引擎的实现方法，希望对你有帮助，如果你觉得有用的话，请点赞我，关注我，并将它分享给你周围的朋友。