ES6模板字符串使开发者省去了用“+”号拼接的繁琐且易错的开发模式

let str1 = 'abc', str2 = 'def' 
console.log(第一个字符串是${str1},第二个字符串是${str2})  

首先肯定是需要用到正则，正则写出来了，直接字符串替换就完成了，现在先要匹配 ${},然后把${}中的变量取到

// 1.创建一个正则表达式 
let args = //  
// 2.从${}中取值 
let args = /${}/  
// 3.由于$、{、}都是有特殊含义的，所以需要转义
let args = /\$\{\}/  
// 4.现在要将${}中的变量名取到，所以需要使用()  
正则圆括号: 
(1). 在被修饰匹配次数的时候，括号中的表达式可以作为整体被修饰 
(2). 取匹配结果的时候，括号中的表达式匹配到的内容可以被单独得到
let args = /\$\{()\}/  
// 5.变量名可能是任意的字符  匹配任意的是 . 变量的名称可能是多个字符 所以需要用到 + 还需要全局匹配 
let args = /\$\{(.+)\}/g  
// 6. 步骤5中的正则 是贪婪模式的: 如果存在多个${} 那第一次就把所有匹配到的内容都拿到，是这样的 

现在不想使用贪婪模式，加?可以使其变为惰性的，取到1次就不再取了

// 惰性的正则  
let args = /\$\{(.+?)\}/g   
// 实现strParse函数 
function strParse(string) {    
  let args = /\$\{(.+?)\}/g
  return string.replace(args, function(){
    return eval(arguments[1])
  })
} 

测试一下:

let str1 = 'abc', str2 = 'def';
console.log(`第一个字符串是${ str1},第二个字符串是${str2}`);
// 第一个字符串是abc,第二个字符串是def
let esStr = '第一个字符串是${ str1},第二个字符串是${str2}';
function strParse(string) {  
    let args = /\$\{(.+?)\}/g     
    return string.replace(args, function(){    
        return eval(arguments[1]);  
    })
}
let str = strParse(esStr);
console.log(str) 
// 第一个字符串是abc,第二个字符串是def