模板解析器测试题（转载）

Veröffentlicht am

阿里的一道前端测试题，转载自surmon.me
题目示意：

1
2
3
4
5
6
7
8
9
10
11
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);

解决方案1， 正则表达式：

1
2
3
4
5
6
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)
  })
}

解决方案2， 字符串模板ES6：

1
2
3
4
5
6
String.prototype.render = function(obj) {
    // 利用了ES6的解构、对象keys新方法，在函数内部解构并自动展开变量
    eval(`var {${Object.keys(obj).join(',')}} = obj`)
    // 利用eval使字符串直接作为ES6解析
    return eval('`' + this + '`')
}

解决方案3， 字符串模板(with函数)：

1
2
3
4
5
6
// 代码由掘金大神@一口怪兽一口烟提供
String.prototype.render = function (obj) {
    with(obj) {
        return eval('`' + this + '`')
    }
}

著作权归作者所有。
作者：Surmon
链接：https://surmon.me/article/32
来源：Surmon.me