前言:
早上在地铁里,看到一篇文章说是用正则实现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运行完美。