JS模板字符串的简单实现

假设有字符串和对象如下

let templateStr = 'i am {{name}},age {{age}},job {{job}} ';
let data = {
name:'xbd',
age:18,
job:'CTO'
}

设计函数templateFunc(str,data)，函数处理后的结果为

console.log(templateFunc(str,data));
//i am xbd,age 18,job CTO

即将字符串中的{{key}}替换为data[key],可以利用String.replace()函数实现。replace函数非常强大，常用功能就是实现字符串替换等等。

1、替换字符串中的字符串，第一个参数是一个字符串，第二个参数是要替换的字符串。

let testString = 'study the replace function of javascript';
//只替换了第一个a
console.log(testString.replace('a','A'));

2、第一个参数是正则表达式，第二个参数要替换的字符串

let testString = 'study the replace function of javascript';
console.log(testString.replace(/a/g,'A'));

3、第二个参数可接收一个函数，这个功能非常强大，我们也是利用这个函数实现本文开始的那个函数，函数如下：

let templateStr = 'i am {{name}},age {{age}},job {{job}} ';
function templateFunc(str,data){
let computed = str.replace(/\{\{(\w+)\}\}/g,function (match,key) {
return data[key];
})
return computed;
}
console.log(templateFunc(templateStr,data));
//i am xbd,age 18,job CTO

到这，就完成了模板字符串的简单实现。