es6模板字符串
首先写两个字符串,然后使用es6模板字符串试一下
1 2 3 4 5 6 7 8
| let obj = { name: 'lily', age: 90 }
let str1 = `${obj.name}的年龄是${obj.age}`;
console.log(str1);
|
手动实现es6模板字符串
写一个普通字符串,内容和模板字符串一样
1 2 3 4 5 6
| let obj = { name: 'lily', age: 90 }
let str2 = '${obj.name}的年龄是${obj.age}';
|
创建一个命名函数replacefunc
,用于匹配到对应的模板,并进行替换。
在replacefunc
函数内创建一个正则//
,对需要匹配的${
和}
进行匹配,并添加转译,在花括号中间添加分组()
,对不能出现结束的花括号进行匹配[^}]
,^
为取反,并至少有一个字符+
,添加全局匹配g
。
后指定字符串方法replace
的第二个函数参数。
match为正则匹配到的字符串,
key为分组匹配到的字符串,
循环两次是因为匹配到两次符合正则的字符串。
最后则用eval()
还原,取到对应作用域内的变量。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| let obj = { name: 'lily', age: 90 }
let str2 = '${obj.name}的年龄是${obj.age}';
function replacefunc(desc) { return desc.replace(/\$\{([^}]+)\}/g, function (match, key) { console.log(match); console.log(key); console.log(eval(key)); return eval(key); }) } console.log(replacefunc(str2));
|
用途:可以在模板引擎中用到。