js模板字符串转html，一行JS代码实现简单的模板字符串替换

和很多刚接触Javascript的新手一样，我最初是采用拼接字符串的方法将JSON数据嵌入到HTML中。 一开始代码量很小字符串转html，暂时可以接受。 但当页面结构变得更加复杂时，它的弱点就变得难以忍受：书写不连贯。 每次写变量的时候，都得把它打断，插入+和"，非常容易出错。

无法重复使用。 HTML片段是离散化的数据，重复的部分无法提取。

未能很好地使用标签。 这是 HTML5 中的一个新标签。 标准强烈建议将HTML模板加载到标签中，以使代码更加简洁。

我当时的心情是这样的：

这他妈是在开玩笑吗？

于是就落到了后来的ES6，而且ES6的模板字符串用起来确实很方便。 对于比较老的项目，项目没有webpack、gulp等构建工具字符串转html，所以很难使用ES6句型，而我想学习这些优秀的处理字符串拼接的方法，我们不妨尝试写一个由我们自己，主要思想是我们可以使用ES6句型来模拟ES6模板字符串的功能。

前端返回的数据格式通常是JSON，所以我们按照以下规则进行模拟。

需求描述

实现 render(template, context) 方法，用上下文填充模板中的占位符。

要求：

不需要有控制流组件（如循环、条件等），只要有变量替换功能即可；

级联变量也可以扩展；

不应呈现通配符分隔符 { 和 }，并且分隔符和变量之间允许有空格字符。

varobj={姓名:"六月",年龄:"15"};

varstr="{{name}}很厉害，只有{{age}}岁";

输出：May很坚强，只有15岁。

PS：本文需要对正则表达式有一定的了解。 如果你还不了解正则表达式，建议先学习一下。 正则表达式也是笔试面试的必备技能。 链接末尾有很多学习正则表达式的链接。

如果是你，你会怎样实现呢？ 你可以先尝试自己写一下，实现起来并不难。

先不说我的实现。 当我向其他朋友提出这个问题时，实现方式并不相同。 我们先看几位童鞋的实现，然后根据他们找出常见的误区和实现不够优雅的地方。 。

小花童鞋：

letstr="{{name}}很厉害，只有{{age}}岁"

letobj={name:'May',age:15}

函数测试（str，obj）{

let_s=str.replace(/{{(w+)}}/g,'$1')

让结果

对于（让