news 2026/4/23 12:25:54

实现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/4/14 22:16:09

Flink状态监控终极指南:3个简单步骤告别内存泄漏噩梦

Flink状态监控终极指南&#xff1a;3个简单步骤告别内存泄漏噩梦 【免费下载链接】flink 项目地址: https://gitcode.com/gh_mirrors/fli/flink 你是不是也曾经在半夜被Flink任务的告警电话吵醒&#xff1f;眼看着状态大小像脱缰的野马一样疯狂增长&#xff0c;却束手无…

作者头像 李华
网站建设 2026/4/19 1:14:15

Windows Terminal远程管理:如何快速搭建多设备控制中心?

Windows Terminal远程管理&#xff1a;如何快速搭建多设备控制中心&#xff1f; 【免费下载链接】terminal The new Windows Terminal and the original Windows console host, all in the same place! 项目地址: https://gitcode.com/GitHub_Trending/term/terminal 你…

作者头像 李华
网站建设 2026/4/21 4:00:03

金仓数据库:不止于兼容,以智能部署、字段级安全与代码级洞察重塑企业级数据库体验

金仓数据库&#xff1a;不止于兼容&#xff0c;以智能部署、字段级安全与代码级洞察重塑企业级数据库体验 兼容是对企业历史投资的尊重是确保业务平稳过渡的基石然而这仅仅是故事的起点在数字化转型的深水区&#xff0c;企业对数据库的需求早已超越“语法兼容”的基础诉求。无论…

作者头像 李华
网站建设 2026/4/14 2:40:16

深度解析美颜算法:从人脸检测到实时渲染的完整实现原理

美颜SDK作为计算机视觉领域的重要应用&#xff0c;其核心技术依赖于先进的人脸识别算法和图像处理技术。本文将从技术实现层面深入剖析美颜算法的核心原理&#xff0c;包括人脸关键点检测、图像滤波算法、实时渲染优化等关键技术细节&#xff0c;为开发者和算法工程师提供深入的…

作者头像 李华
网站建设 2026/4/18 22:30:09

(Cirq开发效率革命):函数提示如何重塑量子编程体验

第一章&#xff1a;Cirq开发效率革命的起点量子计算正从理论研究迈向工程实践&#xff0c;而Cirq作为Google推出的开源量子编程框架&#xff0c;为开发者提供了高效构建和模拟量子电路的能力。其设计专注于近期量子设备&#xff08;NISQ&#xff09;的实际限制&#xff0c;使研…

作者头像 李华