news 2026/6/15 15:16:21

实现template方法,替换模板中的变量

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
实现template方法,替换模板中的变量

问题:实现template方法,替换模板中的变量

consttpl=`<p> hello, my name is <%= name%>, my age is <%= age %>`letdata={name:'jerry',age:18}letresult=template(tpl,data)console.log(result)//输出<p> hello, my name is jerry my age is 18

实现:replace方法,正则匹配

  • 简单替换:str.replace(匹配规则, 替换值);
  • 函数替换:str.replace(匹配规则, 回调函数);
    // 用正则表达式匹配所有占位符,然后对每个匹配项执行回调函数,返回最终要替换的值。

(\w+) 捕获组(关键部分):

  • \w 匹配字母、数字、下划线([a-zA-Z0-9_]);
  • '+'表示匹配 1 个或多个(确保变量名至少有 1 个字符);
  • 用 () 包裹表示 “捕获”,后续回调函数能获取到这个匹配的变量名。

// match是匹配到的<%= name %>, 是被替换的目标;
// key是通过(\w+)捕获到的分组内容,如 name ;
// 回调函数的返回值会替换掉match对应的内容。

functiontemplate(tpl,data){returntpl.replace(/<%=\s*(\w+)\s*%>/g,(match,key)=>{returndata[key]??''//从data中取值,如果不存在则返回空字符串})}
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/15 5:34:44

MikroTikPatch终极指南:轻松管理RouterOS 7.19.1 arm64版本

MikroTikPatch终极指南&#xff1a;轻松管理RouterOS 7.19.1 arm64版本 【免费下载链接】MikroTikPatch 项目地址: https://gitcode.com/gh_mirrors/mikr/MikroTikPatch MikroTikPatch是一个专注于MikroTik RouterOS系统补丁和版本管理的开源项目&#xff0c;为网络管理…

作者头像 李华
网站建设 2026/6/15 10:27:57

MediaMux视频处理终极指南:Windows平台免费全能解决方案

还在为复杂的视频格式转换而头疼吗&#xff1f;MediaMux是一款基于FFmpeg的Windows视频处理工具&#xff0c;专门解决视频格式转换、封装、分割、合并等常见需求。这款免费工具集成了专业级视频处理功能&#xff0c;却提供了极其友好的图形界面&#xff0c;让普通用户也能轻松完…

作者头像 李华
网站建设 2026/6/15 7:13:17

PS4存档管理终极解决方案:Apollo Save Tool完全指南

PS4存档管理终极解决方案&#xff1a;Apollo Save Tool完全指南 【免费下载链接】apollo-ps4 Apollo Save Tool (PS4) 项目地址: https://gitcode.com/gh_mirrors/ap/apollo-ps4 作为一名PS4玩家&#xff0c;你是否曾经历过这样的绝望时刻&#xff1f;奋战数十小时的游戏…

作者头像 李华
网站建设 2026/6/15 10:28:19

Vue.js国际化实战指南:从零构建多语言应用的完整方案

在当今全球化的数字世界中&#xff0c;让应用"说用户的语言"已成为提升用户体验的关键要素。BewlyBewly项目作为一个专注于界面优化的前端项目&#xff0c;其多语言支持架构为我们提供了宝贵的实践参考。本文将带您深入探索基于Vue.js的国际化实现方案&#xff0c;涵…

作者头像 李华
网站建设 2026/6/15 0:53:57

揭秘Azure量子作业资源消耗:如何用CLI实现精准成本控制

第一章&#xff1a;揭秘Azure量子作业资源消耗&#xff1a;成本控制的必要性 在Azure量子计算平台中&#xff0c;执行量子作业并非零成本操作。每一次量子电路的提交、模拟或在真实硬件上的运行&#xff0c;都会消耗特定的量子计算单元&#xff08;Quantum Computing Units, QC…

作者头像 李华