一行代码实现一个简单的模板字符串替换 #32

jawil · 2018-03-04T16:10:27Z

起始

同许多初学 Javascript 的菜鸟一样，起初，我也是采用拼接字符串的形式，将 JSON 数据嵌入 HTML 中。开始时代码量较少，暂时还可以接受。但当页面结构复杂起来后，其弱点开始变得无法忍受起来：

书写不连贯。每写一个变量就要断一下，插入一个 + 和 "。十分容易出错。
无法重用。HTML 片段都是离散化的数据，难以对其中重复的部分进行提取。
无法很好地利用 <template> 标签。这是 HTML5 中新增的一个标签，标准极力推荐将 HTML 模板放入 <template> 标签中，使代码更简洁。

当时我的心情就是这样的：
这TMD是在逗我吗。

于是出来了后来的 ES6，ES6的模板字符串用起来着实方便，对于比较老的项目，项目没webpack，gulp 等构建工具，无法使用 ES6 的语法，但是想也借鉴这种优秀的处理字符串拼接的方式，我们不妨可以试着自己写一个，主要是思路，可以使用 ES6 语法模拟 ES6的模板字符串的这个功能。

后端返回的一般都是 JSON 的数据格式，所以我们按照下面的规则进行模拟。

需求描述

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

要求：

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

var obj = {name:"二月",age:"15"};
var str = "{{name}}很厉害，才{{age}}岁";
输出：二月很厉害，才15岁。

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

如果是你，你会怎么实现？可以先尝试自己写写，实现也不难。

先不说我的实现，我把这个题给其他好友做的时候，实现的不尽相同，我们先看几位童鞋的实现，然后在他们的基础上找到常见的误区以及实现不够优雅的地方。

二月童鞋：

let str = "{{name}}很厉害，才{{age}}岁"
let obj = {name: '二月', age: 15}
function test(str, obj){
    let _s = str.replace(/\{\{(\w+)\}\}/g, '$1')
    let result
    for(let k in obj) {
      _s = _s.replace(new RegExp(k, 'g'), obj[k])
    }
  return _s
}
const s = test(str, obj)

最基本的是实现了，但是代码还是有很多问题没考虑到，首先 Object 的 key 值不一定只是 \w，
还有就是如果字符串是这种的：

let str = "{{name}}很name厉害，才{{age}}岁"`
会输出 ：二月很厉害二月害，才15岁

此处你需要了解正则的分组才会明白 $1 的含义，错误很明显，把本来就是字符串不要替换的 name 也给替换了，从代码我们可以看出二月的思路。

代码的作用目标是 str，先用正则匹配出 {{name}} 和 {{age}}，然后用分组获取括号的 name,age,最后用 replace 方法把 {{name}} 和 {{age}} 替换成 name 和 age，最后字符串就成了 name很name厉害，才age岁，最后 for in 循环的时候才导致一起都被替换掉了。
用 for in 循环完全没必要，能不用 for in 尽量不要用 for in，for in 会遍历自身以及原型链所有的属性。

志钦童鞋：

var str = "{{name}}很厉害，才{{age}}岁";
var str2 = "{{name}}很厉name害，才{{age}}岁{{name}}";

var obj = {name: '周杰伦', age: 15};
function fun(str, obj) {
    var arr;
    arr = str.match(/{{[a-zA-Z\d]+}}/g);
    for(var i=0;i<arr.length;i++){
        arr[i] = arr[i].replace(/{{|}}/g,'');
        str = str.replace('{{'+arr[i]+'}}',obj[arr[i]]);
    }
    return str;
}
console.log(fun(str,obj));
console.log(fun(str2,obj));

思路是正确的，知道最后要替换的是 {{name}} 和 {{age}} 整体，而不是像二月童鞋那样最后去替换 name，所有跑起来肯定没问题，实现是实现了但是感觉有点那个，我们要探讨的是一行代码也就是代码越少越好。

小维童鞋：

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);

实现的已经简单明了了，就是把 obj 的 key 值遍历，然后拼成 {{key}}，最后用 obj[key] 也就是 value 把 {{key}} 整个给替换了，思路很好，跟我最初的版本一个样。

我的实现：

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的可怕性。

// Chrome v63
const div = document.createElement('div');
let m = 0;
for (let k in div) {
  m++;
}
let n = 0;
console.log(m); // 231
console.log(Object.keys(div).length); // 0

一个 DOM 节点属性竟然有这么多的属性，列举这个例子只是让大家看到 for in 遍历的效率问题，不要轻易用 for in循环，通过这个 DOM 节点之多也可以一定程度了解到 React 的 Virtual DOM 的思想和优越性。

除了用 for in 循环获取 obj 的 key 值，还可以用 Object.key() 获取，Object.getOwnPropertyNames() 以及 Reflect.ownKeys()也可以获取，那么这几种有啥区别呢？这里就简单说一下他们的一些区别。

for...in循环：会遍历对象自身的属性，以及原型属性，for...in 循环只遍历可枚举(不包括 enumerable为 false )属性。像 Array 和 Object 使用内置构造函数所创建的对象都会继承自 Object.prototype 和 String.prototype 的不可枚举属性;

Object.key()：可以得到自身可枚举的属性,但得不到原型链上的属性;

Object.getOwnPropertyNames()：可以得到自身所有的属性(包括不可枚举),但得不到原型链上的属性, Symbols 属性也得不到.

Reflect.ownKeys：该方法用于返回对象的所有属性，基本等同于 Object.getOwnPropertyNames() 与 Object.getOwnPropertySymbols 之和。

上面说的可能比较抽象，不够直观。可以看个我写的 DEMO，一切简单明鸟。

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]);
}
const template = "{{name}}很厉name害，才{{age}}岁";
const context = { name: "jawil", age: "15" };
console.log(render(template, context));

可以对照上面文档的话来做分析：该函数的返回值(obj[key]=jawil)将替换掉第一个参数(match=={{name}})匹配到的结果。

简单分析一下：.*? 是正则固定搭配用法，表示非贪婪匹配模式，尽可能匹配少的，什么意思呢？举个简单的例子。

先看一个例子：

源字符串：aa<div>test1</div>bb<div>test2</div>cc

正则表达式一：<div>.*</div>

匹配结果一：<div>test1</div>bb<div>test2</div>

正则表达式二：<div>.*?</div>

匹配结果二：<div>test1</div>（这里指的是一次匹配结果，不使用/g，所以没包括<div>test2</div>）

根据上面的例子，从匹配行为上分析一下，什是贪婪与非贪婪匹配模式。

利用非贪婪匹配模就能匹配到所有的{{name}}，{{age}}，上面的也说到过正则分组，分组匹配到的就是 name，也就是 function 的第二个参数 key。

所以这行代码的意思就很清楚，正则匹配到{{name}}，分组获取 name，然后把 {{name}} 替换成 obj[name](jawil)。

当然后来发现还有一个小问题，如果有空格的话就会匹配失败，类似这种写法：

const template = "{{name   }}很厉name害，才{{age   }}岁";

所以在上面的基础上还要去掉空格，其实也很简单，用正则或者 String.prototype.trim() 方法都行。

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 的原型链，得到最终版本

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

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

之后，我们便可以这样调用啦：

"{{name}}很厉name害，才{{ age  }}岁".render({ name: "jawil", age: "15" });

收获

通过一个小小的模板字符串的实现，领悟到要把一个功能实现不难，要把做到完美真是难上加难，需要对基础掌握牢固，有一定的沉淀，然后不断地打磨才能比较优雅的实现，通过由一个很小的点往往可以拓展出很多的知识点。

一张图快速入门正则表达式：

The text was updated successfully, but these errors were encountered:

jawil · 2018-03-04T16:25:28Z

老规矩，发文章送1024邀请码，一切随缘~

2bd7d4ca56f52c31 | 2018-03-05 00:24:05 | 未使用 | 邀请

689e1bf281ae43ae | 2018-03-05 00:24:05 | 未使用 | 邀请

已注册，请勿再试~ 大晚上不睡觉，抢码真够迅速
2bd7d4ca56f52c31 | 2018-03-05 00:24:05 | cowboys | 2018-03-05 00:30:01 | 已邀请 |

689e1bf281ae43ae | 2018-03-05 00:24:05 | nicolaszz | 2018-03-05 00:28:25 | 已邀请

ClarenceC · 2018-03-05T00:31:47Z

感觉还在研究文章，码就给抢完了。
自己实现模版字符串变量实现有点意思了

jamninetyfive · 2018-03-05T01:30:48Z

老铁 1024地址可否私一个

huaibaomengxiang · 2018-03-05T01:40:06Z

我是老实人这个码能干吗？

Michaelooo · 2018-03-05T01:41:33Z

大佬开个专题：一行代码带你入门1024系列

jawil · 2018-03-05T01:47:24Z

还不如搞个一行代码获取1024邀请码😂 @Michaelooo

deepred5 · 2018-03-05T02:15:38Z

大佬在1024上班？

libin1991 · 2018-03-05T10:43:32Z

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function parseString(str, obj) {    //微醺岁月的
				Object.keys(obj).forEach(key => {
					str = str.replace(new RegExp(`{{${key}}}`, 'g'), obj[key]);
				});
				return str;
			}

			function test(str, obj) {   //我的
				let _s = str.match(/\{\{([\w_$-])+\}\}/g);  //   let _s = str.match(/\{\{([^{}])+\}\}/g);
				for(let k in _s) {
					var i = _s[k].slice(2, -2);
					str = str.replace(_s[k], obj[i]);
				}
				return str
			}
			const str = "{{na$me}}很厉name害{{na$me}}，才{{ag-e}}岁{{cit_y}}";
			const obj = {
				'na$me': "jawil",
				'ag-e': "15",
				'cit_y': "bj"
			};
			console.log(parseString(str, obj));
			console.log(test(str, obj));
		</script>
	</head>

	<body>
	</body>

</html>

XinChou16 · 2018-03-05T11:18:32Z

当数据为多层时，一行代码还是解决不了，我之前也做了一个轻量级的模板引擎，https://github.com/XinChou16/simpTpl

var data = {
   name:'xxx',
  hometown:{
       'xxx'
    }
}

jiamianmao · 2018-03-14T08:11:10Z

大胸弟，看你去年探讨浏览器渲染机制问题，颇感兴趣，不知道有没有输出一些博客资料呢？

jawil · 2018-03-14T08:14:11Z

https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

@jiamianmao

huaibaomengxiang · 2018-03-19T06:28:03Z

大兄弟你的blog不见了改地址了么

misty0304 · 2018-04-03T07:45:36Z

又出新文章了啊，路过学习了

xCss · 2018-04-10T04:05:05Z

https://github.com/trix/nano

ICELI · 2018-09-03T12:40:22Z

function get(path, obj, fb) {
  return path.split('.').reduce((res, key) => res[key] || fb, obj);
}

function parseTpl(template, map, fallback) {
  return template.replace(/\${([^{]+)}/g, (match, $1) => {
    const path = $1.trim();
    return get(path, map, fallback || match);
  });
}

export default parseTpl;

lq782655835 · 2019-08-29T09:58:25Z

图片有个谬误：~~\w 匹配字母~~

正解：
\w: 匹配一个单字字符（字母、数字或者下划线）。等价于 [A-Za-z0-9_]。

出处MDN

xgqfrms · 2020-09-10T00:28:14Z

template-engine

regex

https://github.com/topics/template-engine

fripig mentioned this issue Mar 5, 2018

20180305 72 tabs fripig/article_log#497

Open

Colafornia mentioned this issue Mar 9, 2018

新鲜货 [ 2018-03-04 ~ 2018-03-09 ] Colafornia/little-robot#7

Open

jawil added JS 技巧 labels Mar 16, 2018

lq782655835 mentioned this issue Sep 7, 2018

正则表达式一张图总结 lq782655835/blogs#15

Open

gnehs mentioned this issue Jan 19, 2019

l18n gnehs/PokaPlayer#86

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

一行代码实现一个简单的模板字符串替换 #32

一行代码实现一个简单的模板字符串替换 #32

jawil commented Mar 4, 2018 •

edited

jawil commented Mar 4, 2018 •

edited

ClarenceC commented Mar 5, 2018 •

edited

jamninetyfive commented Mar 5, 2018

huaibaomengxiang commented Mar 5, 2018

Michaelooo commented Mar 5, 2018 •

edited

jawil commented Mar 5, 2018

deepred5 commented Mar 5, 2018

libin1991 commented Mar 5, 2018 •

edited

XinChou16 commented Mar 5, 2018

jiamianmao commented Mar 14, 2018

jawil commented Mar 14, 2018

huaibaomengxiang commented Mar 19, 2018

misty0304 commented Apr 3, 2018

xCss commented Apr 10, 2018

ICELI commented Sep 3, 2018

lq782655835 commented Aug 29, 2019

xgqfrms commented Sep 10, 2020 •

edited

一行代码实现一个简单的模板字符串替换 #32

一行代码实现一个简单的模板字符串替换 #32

Comments

jawil commented Mar 4, 2018 • edited

起始

需求描述

要求：

二月童鞋：

志钦童鞋：

小维童鞋：

我的实现：

最后实现

收获

一张图快速入门正则表达式：

jawil commented Mar 4, 2018 • edited

ClarenceC commented Mar 5, 2018 • edited

jamninetyfive commented Mar 5, 2018

huaibaomengxiang commented Mar 5, 2018

Michaelooo commented Mar 5, 2018 • edited

jawil commented Mar 5, 2018

deepred5 commented Mar 5, 2018

libin1991 commented Mar 5, 2018 • edited

XinChou16 commented Mar 5, 2018

jiamianmao commented Mar 14, 2018

jawil commented Mar 14, 2018

huaibaomengxiang commented Mar 19, 2018

misty0304 commented Apr 3, 2018

xCss commented Apr 10, 2018

ICELI commented Sep 3, 2018

lq782655835 commented Aug 29, 2019

xgqfrms commented Sep 10, 2020 • edited

template-engine

jawil commented Mar 4, 2018 •

edited

jawil commented Mar 4, 2018 •

edited

ClarenceC commented Mar 5, 2018 •

edited

Michaelooo commented Mar 5, 2018 •

edited

libin1991 commented Mar 5, 2018 •

edited

xgqfrms commented Sep 10, 2020 •

edited