【js】手动实现一个es6模板字符串

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); // lily的年龄是90

手动实现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); // ${obj.name} || ${obj.age}
console.log(key); // obj.name || obj.age
console.log(eval(key)); // lily || 90
return eval(key);
})
}
console.log(replacefunc(str2));

用途:可以在模板引擎中用到。

本文作者: haise
本文地址https://www.shifeng1993.com/2019/03/05/js_temp_str/
版权声明: 转载请注明出处!