news 2026/3/18 11:38:16

实现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/3/15 14:11:58

破解异地用工难题:终成国际一站式人事外包服务

还在为异地员工社保缴纳、各地政策不一而头痛吗&#xff1f;管理成本居高不下&#xff0c;合规风险如影随形&#xff1f;终成国际人事服务外包&#xff0c;是您破解这些难题的“金钥匙”。 我们成立于2010年&#xff0c;深耕人力资源服务领域16年&#xff0c;服务网络覆盖全国…

作者头像 李华
网站建设 2026/3/15 9:43:26

Echarts实现双Y轴,并设置刻度线对齐

在数据可视化场景中&#xff0c;双Y轴图表常用于展示具有不同量纲的数据。但默认配置下&#xff0c;左右Y轴的0刻度线、刻度线可能无法对齐&#xff0c;影响图表可读性。本文将详细介绍该功能的实现方法 1. 实现双Y轴 一个Y轴时的 yAxis 是对象 yAxis: {type: value,name:Y轴…

作者头像 李华
网站建设 2026/3/15 9:41:54

5步快速掌握Pyecharts Graph图:从零到实战的完整可视化指南

5步快速掌握Pyecharts Graph图&#xff1a;从零到实战的完整可视化指南 【免费下载链接】pyecharts &#x1f3a8; Python Echarts Plotting Library 项目地址: https://gitcode.com/gh_mirrors/py/pyecharts 还在为复杂的关系网络数据可视化而烦恼吗&#xff1f;当传统…

作者头像 李华
网站建设 2026/3/15 9:43:40

Q#单元测试+代码覆盖率(从零搭建VSCode监控环境)

第一章&#xff1a;Q# 程序的 VSCode 代码覆盖率在量子计算开发中&#xff0c;确保 Q# 程序的测试完整性至关重要。VSCode 作为主流开发环境&#xff0c;结合 .NET 测试工具链&#xff0c;可实现对 Q# 代码的覆盖率分析。尽管原生支持仍在演进&#xff0c;但借助间接工具链仍可…

作者头像 李华