欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

模板字符串替换教程,实现一个 render(template, context) 方法,将 template 中的占位符用 context 填充

程序员文章站 2022-12-08 15:13:48
需求描述 实现一个 render(template, context) 方法,将 template 中的占位符用 context 填充。 要求: 不需要有控制流成分(如 循环...

需求描述

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

要求:

不需要有控制流成分(如 循环、条件 等等),只要有变量替换功能即可

级联的变量也可以展开

被转义的的分隔符 { 和 } 不应该被渲染,分隔符与变量之间允许有空白字符

实例1.

var str = "{{name}}很厉害,才{{age}}岁";
var obj = {name: '周杰伦', age: 15};
function fun(str, obj) {
    var arr;
    arr = str.match(/{{[a-zA-Z\d]+}}/g);
    for(var i=0;i

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

案例2.

function a(str, obj) {
  var str1 = str;
  for (var key in obj) {
    var re = new RegExp("{{" + key + "}}", "g");
    str1 = str1.replace(re, obj[key]);
  }
  console.log(str1);
}
const str = "{{name}}很厉name害{{name}},才{{age}}岁";
const obj = { name: "jawil", age: "15" };
a(str, obj);
VM1004:7 jawil很厉name害jawil,才15岁

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

实例3.

function parseString(str, obj) {
  Object.keys(obj).forEach(key => {
    str = str.replace(new RegExp(`{{${key}}}`,'g'), obj[key]);
  });
  return str;
}
const str = "{{name}}很厉name害{{name}},才{{age}}岁";
const obj = { name: "jawil", age: "15" };
console.log(parseString(str, obj));

没用 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 之和。

const parent = {
  a: 1,
  b: 2,
  c: 3
};
const child = {
  d: 4,
  e: 5,
  [Symbol()]: 6
};
child.__proto__ = parent;
Object.defineProperty(child, "d", { enumerable: false });

for (var attr in child) {
  console.log("for...in:", attr);// a,b,c,e
}
console.log("Object.keys:", Object.keys(child));// [ 'e' ]
console.log("Object.getOwnPropertyNames:", Object.getOwnPropertyNames(child)); // [ 'd', 'e' ]
console.log("Reflect.ownKeys:", Reflect.ownKeys(child)); //  [ 'd', 'e', Symbol() ]

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

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

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

function render(template, context) {
  return template.replace(/\{\{(.*?)\}\}/g, (match, key) => context[key.trim()]);
}
const template = "{{name   }}很厉name害,才{{age   }}岁";
const context = { name: "jawil", age: "15" };
console.log(render(template, context));

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

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()]);
};

模板字符串替换教程,实现一个 render(template, context) 方法,将 template 中的占位符用 context 填充

;i++){>