为什么需要模版

将复杂的字符串拼接简单化

字符串拼接

var data = {
	"name" : "小明",
	"age"  : "22岁",
	"hobby" : "喜欢码代码"
};

var html = "<p>姓名:"+ data.name +"</p>"+
		   "<p>年龄: "+ data.age +"</p>"+
		   "<p>爱好: "+ data.hobby +"</p>";

document.getElementById("dom").innerHTML = html;

使用模版

var data = {
	"name" : "小明",
	"age"  : "22岁",
	"hobby" : "喜欢码代码"
};

var html = "<p>姓名:{{name}}</p>"+
		   "<p>年龄: {{age}}</p>"+
		   "<p>爱好: {{hobby}}</p>";

var innerhtml = html.replace(/{{([\w]+)}}/g,function(str,key){
	return data[key] || str;	
});

document.getElementById("dom").innerHTML = innerhtml;

export

<p>姓名:小明</p><p>年龄: 22岁</p><p>爱好: 喜欢码代码</p>

我们来看一个案例

var phone = "13112345678";
现在需要把这个手机号中间 5 位替换为 * 号

var phone2 = phone.replace(/([0-9]{3})([0-9]{5})([0-9]{3})/,"$1*****$3");
//输出结果
// phone2 => 131*****678

利用 正则中的分组把一个表达式一个表达式分组, 然后使用 $ 关键字来接收捕获的结果


replace 需要替换的参数还可以是一个函数

/*
	ph : 本次匹配对象的结果
	$1 : 第一个分组表达式
	$2 : 第二个分组表达式
	$3 : 第三个分组表达式
*/
phone.replace(/([0-9]{3})([0-9]{5})([0-9]{3})/,function(ph,$1,$2,$3){
	return $1 + "*****" + $3;
});

到这里大家应该猜到了,上面的模版例子就是利用这两个特性来实现的模版替换, 使用正则的分组与 replace 替换时可用传入一个函数