缘起
一方面是为了加深前端基础,提升代码能力,另一方面是一个悲哀的故事。
目标
实现一个Compile
函数,可以编译JavaScript中的模板字符。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
|
var a = { b: '[字符串]', c: [ '[数组中的字符]', ['[数组中的数组]', ['[数组中的数组中的数组]']], { g: '[数组中的对象项]' } ], e: { f: '[对象中的对象]', h: ['[对象中的数组项]'] } } var string = 'Start-${e.f}${b}${c[0]}-Middle-${c[1][0]}${c[1][1][0]}${c[2].g}${e.h[0]}End'
compile(string, a)
Start - [对象中的对象][字符串][数组中的字符] - Middle - [数组中的数组][数组中的对象项][对象中的数组项] End
|
具体的实现代码分为两块,一块儿是获取字符中的模板替换位置,另一部分是通过字符去获得对象中,相应的值。
实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| let getVarable = function (a, varableNameStr) { if (!varableNameStr) return '' varableNameStr = varableNameStr.replace('${', '').replace('}', '') let packages = varableNameStr.split('.') let middleTemp = a packages.forEach(each => { each.split(/[\[|\]]+/).forEach(varable => { if (varable) { let key = parseInt(varable) if (key === key) { middleTemp = middleTemp[key] } else { middleTemp = middleTemp[varable] } } }) }) return middleTemp }
let compile = function (str, a) { let regVar = /\$\{.+?\}/g let matchVar = str.match(regVar) matchVar.forEach(m => { str = str.replace(m, getVarable(a, m)) }) return str }
console.log(compile(string, a))
|