es6的反引号`${name}`字符串模板是怎么实现的

Question

自己写了一个

var formatString = function(str){
  var re = /\${(.*?)}/g;
  function replacer(match){
      return eval(match.substring(2,match.length-1));
  }
  var result = str.replace(re, replacer)
  return result;
}

但是不能解决eval作用域的问题，eval取不到对应的变量。

究竟这个是怎么实现的？

Answer 1

你应该取对应作用域的变量，而不是用eval来取。
比如:

${ data. name }

如果之前的作用域为this，则这样获得

this[data][name]

我电脑在做系统，暂时无法测试是否可行，不过这个思路是存在的

Answer 2

function replacer(match) {
  var re = /\${(.*?)}/g;
  var obj = re.exec(match);
  obj = obj[1].split('.');
  var value = this;
  obj.forEach(function(name){
    value = value[name];
  });
  return value == this ? '' : value;
}

function formatString(str) {
  var re = /\${(.*?)}/g;
  var newStr = str.replace(re, replacer);
  return newStr;
}

var person = {
  name: 'joe',
  age: 22
};

var format = formatString('my name is ${person.name}, my age is ${person.age}');
console.log(format);

简单写了一下，可能有考虑不周的地方，希望有人看到可以指出。