正则表达式实现ES6字符串模板功能

前言：

早上在地铁里，看到一篇文章说是用正则实现ES6字符串模板，没看细节，好奇心来了，我也实现一下。

ES6模板字符串

• 语法：我爱{ lover },会自动读取当前上下里变量lover的值并填充上去
• 相当方便,省去了拼接字符串导致的繁琐和易错，尤其是在DOM操作innerHTML里

---

开搞

实现将字符串"我叫${ me }，爱人是${ lover },${ lover }很爱我."里的占位符用变量代替。

function template(string){
    let reg = /\${([^{}]*)}/g;
    return string.replace(reg,function(match,p1){
        let variable = p1.trim();
        if(variable === ""){
            //空白字符
            return "";
        }else if(!/^[a-zA-Z_$]+[\w$]*$/.test(variable)){
            //对非法标识符做判断。由于精力有限,不判断关键字和保留字
            throw ("Unexpected token "+ variable )
        }else{
            //使用强大的eval函数直接将字符串按变量执行
            return eval(variable)
        }
    })
}

//做个测试
var me = "hezebing";
var lover = "wangyanyan";
template("我叫${ me }，爱人是${ lover }");//"我叫hezebing，爱人是wangyanyan"

//测试异常
template("我叫${ _me }，爱人是${ lover }");//_me is not defined
template("我叫${ +me }，爱人是${ lover }");//Unexpected token +me

ok运行完美。