JS模板字符串的简单实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011350550/article/details/79596566

假设有字符串和对象如下

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 

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