ES6模板字符串的实现原理

ES6模板字符串的原理

在ES5中经常会用到拼接字符串，比如

let year = 3, pos = "前端";
"我已经有" + year + "年" + pos + "开发经验了";
输出结果是 =>  "我已经有3年前端开发经验了"
复制代码

ES5中的拼接字符串在实际使用中效率不高，可读性极差;所以ES6对此作出了改进，推出了模板字符串，以上的代码就变成了

let year = 3, pos = "前端";
`我已经有${year}年${pos}开发经验了`
输出结果是 =>  "我已经有3年前端开发经验了"
复制代码

是不是特别好用，注意模板字符串使用的是反引号(Tab键上边那个) 那它的原理是什么？是怎么实现的？

// 定义一个字符串
let year = 3, pos = "前端";
let str = "我已经有${year}年${pos}开发经验了";
function replace(str){
    // 原理是通过正则匹配，替换原字符串中的变量
    return str.replace(/\$\{([^}])\}/g,function(matched,key){
            console.log(arguments)  // arguments见下面
            return eval(key)
    })
}
console.log(replace(str)) => "我已经有3年前端开发经验了"

// 字符串repalce方法的arguments
{ '0': '${year}',                               // 大正则匹配项
  '1': 'year',                                  // 正则小分组匹配项        
  '2': 4,                                       // 匹配项第一个元素在字符串中的索引    
  '3': '我已经有${year}年${pos}开发经验了' }    // 原字符串
{ '0': '${pos}',
  '1': 'pos',
  '2': 12,
  '3': '我已经有${year}年${pos}开发经验了' }
复制代码

总结

很多模板其实都是这个原理，比如handlebar的{{handlebar}}, ejs的<%=ejs%>