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