如果有这样一种需求
var data = {
name: 'ruoyu',
addr: 'Hunger Valley'
};
var tpl = 'Hello, my name is {{name}}. I am in {{addr}}.';
要求你把tpl字符串里形如{{}}的字符串替换成data对象里面对应的key，我们怎么搞
我们首先分析形如{{}}字符串的规律，然后定义一个正则来匹配它。通过分析，我们知道{{}}里面是一个变量。
那么他就满足变量的一般规则：
1.变量必须以字母、下划线或者$开头，但是不能以数字开头
2.变量第一个符号后面可以接字母、数字、下划线、或者.
我们依照这两条规则来定义一个正则
var reg=/{{[a-zA-Z_$][a-zA-Z0-9_.]*}}/g;
我们可以使用字符串的replace方法来匹配正则，达到字符串替换目的
var newStr = tpl.replace(reg,'123')
console.log(newStr)
浏览器输出结果：
Hello, my name is 123. I am in 123.
这样的替换方式功能太弱，他只能把匹配到的字符串替换成相同的内容，而我们的目的是把{{name}}替换成data[name],把{{addr}}替换成data[addr]。
如果你去看replace()方法的api，就会发现它的第二个参数可以是一个函数。
var newStr = tpl.replace(reg,function(raw,key,offset,string){
})
function的第一个参数raw是正则匹配到的内容{{name}}、{{addr}}
如果把reg写成这样
var reg=/{{([a-zA-Z_$][a-zA-Z0-9_.]*)}}/g;
相比上面，多了一对括号，也就是给reg添加一个子表达式，这样function的第二个参数就起作用了，key的意思是reg的第一个子表达式匹配到的内容name、addr
这样就可以满足目的
var newStr = tpl.replace(reg,function(raw,key,offset,string){
return data[key]||raw;
})
但是，还有一个问题需要解决，假如data这样写
var data={
name: 'ruoyu',
addr: 'Hunger Valley',
friend: {
name: 'hunger',
car: {
color: 'white'
}
}
}
var tpl = 'Hello, my name is {{name}}. I am in {{age}},I have a friend {{friend.name}},he has a {{friend.car.color}} car'
这样使用上面的规则就匹配不到了，因为data对象里没有名字是friend.name和friend.car.color的key,我们可以巧妙的利用数组的shift()方法来解决这个问题
先把匹配到的data里面不存在的key变成一个数组
var newStr = tpl.replace(reg,function(raw,key,offset,string){
var paths=key.split('.');
var lookup=data;
while(paths.length>0){
lookup=lookup[paths.shift()];
}
})
数组的shift()方法的作用是删除并返回数组的第一个元素，假如匹配到的key是friend.car.color,那么paths=['friend','car','color'];paths.length=3>0,进入第一次循环：paths.shift()返回friend,paths=['car','color'],lookup=data[friend]={name:'hunger',car:{color:'white'}}
这样反复进行while循环，直到paths里面什么都没有的时候，这时的lookup就是我们需要的color了。
var newStr = tpl.replace(reg,function(raw,key,offset,string){
var paths=key.split('.');
var lookup=data;
while(paths.length>0){
lookup=lookup[paths.shift()];
}
return lookup||raw;
})
完美解决问题
