手写es6的模板字符串实现原理

ES6模板字符串

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
    // replace方法有两个参数   第二个参数可以是要替换的内容，或者是一个返回字符串的函数，这个函数有几个参数，详情可以查看MDN
    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