模板字符串替换

曾经终败给现在 2022-05-29 00:44 299阅读 0赞

文章原址[https://segmentfault.com/a/1190000013516128][https_segmentfault.com_a_1190000013516128]

需求描述

> 实现一个 render(template, context) 方法，将 template 中的占位符用 context 填充。

要求：

> 不需要有控制流成分（如 循环、条件 等等），只要有变量替换功能即可  
> 级联的变量也可以展开  
> 被转义的的分隔符 \{ 和 \} 不应该被渲染，分隔符与变量之间允许有空白字符

实例1.

跑起来肯定没问题，但是代码有点多

案例2.

实现的已经简单明了了，就是把 obj 的 key 值遍历，然后拼成 \{ \{key\}\}，最后用 obj\[key\] 也就是 value 把 \{ \{key\}\} 整个给替换了

实例3.

没用 for…in 循环就是为了考虑不必要的循环，因为 for…in 循环会遍历原型链所有的可枚举属性，造成不必要的循环。

> for…in循环：会遍历对象自身的属性，以及原型属性，for…in 循环只遍历可枚举(不包括 enumerable为 false )属性。像 Array 和 Object 使用内置构造函数所创建的对象都会继承自 Object.prototype 和 String.prototype 的不可枚举属性;  
> Object.key()：可以得到自身可枚举的属性,但得不到原型链上的属性;
> 
> Object.getOwnPropertyNames()：可以得到自身所有的属性(包括不可枚举),但得不到原型链上的属性, Symbols 属性也得不到.
> 
> Reflect.ownKeys：该方法用于返回对象的所有属性，基本等同于 Object.getOwnPropertyNames() 与 Object.getOwnPropertySymbols 之和。

通过 MDN 首先我们先了解一下 replace 的用法。

通过文档里面写的 str.replace(regexp|substr, newSubStr|function) ，我们可以发现 replace 方法可以传入 function 回调函数，

function (replacement) 一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。参考这个指定一个函数作为参数。

甚至，我们可以通过修改原型链，实现一些很酷的效果：

String.prototype.render = function (context) {
      return this.replace(/\{\{(.*?)\}\}/g, (match, key) => context[key.trim()]); };

如果\{\}中间不是数字，则\{\}本身不需要转义，所以最终最简洁的代码：

String.prototype.render = function (context) {
      return this.replace(/{ {(.*?)}}/g, (match, key) => context[key.trim()]); };

![这里写图片描述][Image 1]

[https_segmentfault.com_a_1190000013516128]: https://segmentfault.com/a/1190000013516128
[Image 1]: