JS模板字符串的简单实现
由于前不久遇到⼀个前端笔试题，实现⼀个简易的模板渲染函数，但是没能做出来，于是在此进⾏总结记录。
题⽬⼤致内容如下：
// 实现⼀个简易模板渲染
// 例 renderTpl('我已经有${year}年${pos}开发经验了', {year: '2', pos: '前端'})  输出 '我已经有2年前端开发经验了'
使⽤过ES6的模板字符串语法的⼈都知道，可以使⽤${}将变量包起来，替代原来ES5的+拼接字符串。这个函数要实现的功能正是如此。
因为是使⽤${}这种特定的语法，我们很容易想到，使⽤正则将${}⾥⾯的内容替换出来，填充我们定义的变量进去即可。这⾥使⽤到字符串的replace⽅法：(更多replace内容)
/**
* 模板字符串的实现函数
* @param {String} str 要匹配的字符串
* @param {Object} obj 要替换的对象
* @returns
js 正则替换*/
function renderTpl(str, obj){
// 该正则⽤来匹配 ${} ⾥的内容
const regex =/\$\{([^}]+)\}/g
// 该函数⽤来替换第⼀个参数`match`匹配到的结果，返回值就是替换后的结果
const replacer=function(match, item){
console.log(match, item);
return obj[item]
}
// 返回替换函数执⾏后的结果
place(regex, replacer)
}
// 这⾥的打印语句会打印出
// ${year} year
// ${pos} pos
const renderStr =renderTpl("我已经有${year}年${pos}开发经验了",{ year:'2', pos:'前端'})
console.log(renderStr)// 打印结果： "我已经有2年前端开发经验了"
实现这个函数的主要难点我认为是正则表达式的书写，对正则表达式不是很熟悉的话，真的很难…
该正则进⾏拆分：
/
\$\{([^}]+)\}/g
1. ⾸先是g后缀，表⽰全局匹配，不会匹配到⼀个就结束
2. 前⾯的\$和\{表⽰转义，进⾏匹配${
3. 匹配到${后，接下来这⼀串([^}]+)表⽰匹配⼀个或多个⾮}的字符
4. 最后匹配\}， 匹配右花括号

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。