模板字符串的实现原理

模板字符串是什么

以前我们都是使用拼接字符串的形式来写，这样对我们来说很烦恼，稍有不慎就会拼接错误，es6出了一个拼接字符串的方法很好的帮我们解决了这个问题，接下来就给大家介绍一下什么是模板字符串
模板字符串就是有原本的""改成了我们现在的``，在模板字符串里面我们可以直接定义变量，${}里面写的就是我们要输出的变量
字符串拼接

let name="张三",age="18";
let str=name+" 今年 "+ age +" 岁了";

模板字符串

let name="张三",age="18";
let str=`${name} 今年  ${age}  岁了`;

我们可以看到其实他们现在的区别也没多大，但是大家想一下，如果拼接的多了或者结构复杂了那么这个区别就自然出现了

模拟模板字符串

现在我们大概知道模板字符串是个啥东西了，但是我们底层的原理还不是很熟悉，那我们就来模拟一下看看吧

let name="张三",age="18";
let desc="${name} 今年  ${age}  岁了";
function replace(desc){
    return desc.replace(/\$\{([^}]+)\}/g,function(mathed,key,c,d){
            console.log(mathed,key,c,d)
            //${name} name 0 ${name} 今年  ${age}  岁了
            //${age} age 12 ${name} 今年  ${age}  岁了
            //replace中 mathed 为匹配到的字符串，key为对应替换的字符串，c为替换的位置，d为整个要替换的字符串。
            return eval(key);
            //eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。这里的eval会将原本的name和age改成成张三和18
    })
}

模板字符串其实就是我们使用正则将${}取出来然后进行赋值，是不是感觉很简单呢，可以动手自己试试吧