阿里的一道测试题（群里的小伙伴提供的），题目大概这样：

大概就是让写个简单的模板解析器，尝试了好多种解构的方法都没成功...

先思考，下面就是答案了！

问题代码：

        
        

          
1234567891011
          
var greeting = 'My name is ${name}, age ${age}, I am a ${job.jobName}';
var employee = {
	name: 'XiaoMing',
	age: 11,
	job: {
		jobName: 'designer',
		jobLevel: 'senior'
	} 
};
var result = greeting.render(employee);
console.log(result);
        
      

解决方案一（绝大多数的解决方案-正则）

        
        

          
12345678
          
// 你可以趁机想想还有没有其他解法，时间充裕
// 代码参考自 @剪影boy + @Zhongsheng
String.prototype.render = function(obj) {
  return this.replace(/\$\{(\w+|\w+\.\w+)\}/g, match => {
    var keys = match.replace('${', '').replace('}', '').split('.')
    return keys.reduce((acc, cv) => acc[cv], obj)
  })
}
        
      

解决方案二（字符串模板）

        
        

          
1234567
          
// 这办法是我自己想到的，有点笨
String.prototype.render = function(obj) {
	// 利用了ES6的解构、对象keys新方法，在函数内部解构并自动展开变量
	eval(`var {${Object.keys(obj).join(',')}} = obj`)
    // 利用eval使字符串直接作为ES6解析
	return eval('`' + this + '`')
}
        
      

方案二是后来不断尝试得到的

拿键声明变量 => 拒绝循环所以用 keys => 数组转成字符串再组合对象字符 => eval 去构造解构 => OK!

对 JS 又爱出了新高度 😂 six six six!

解决方案三（With 函数）

        
        

          
123456
          
// 代码由 掘金@一口怪兽一口烟 提供
String.prototype.render = function (obj) {
	with(obj) {
		return eval('`' + this + '`')
	}
}
        
      

莫非是史上最优解？😂 double click six six six!

期待更多的解法

字符串模板支持函数变量表达式，纯天然的模板解析器，如果是 Mustache 范儿，解析前 replace 下就行了

不再补充明细

去控制台跑下试试吧

随时欢迎补充！

相关学习资料：

• MDN - 解构
• MDN - With
• 阮大爷 - ES6手册

完