tnblog
首页
视频
资源
登录

ts实现动态拼接字符串,实现类似 C# 的 string.Format的格式化字符串。ts,js动态给拼接字符串提供参数

549人阅读 2024/12/19 14:21 总访问:824564 评论:0 收藏:0 手机
分类: 前端

模板是这样的:”于${0}通过${1}课程体系《${2}》课程授课”
对于这种格式的模板字符串,可以使用一个简单的替换函数来处理,而不需要复杂的正则表达式转义。下面是一个处理这种模板的示例函数:

  1. function formatString(template: string, ...values: any[]): string {
  2. return template.replace(/\$\{(\d+)\}/g, (match, indexStr) => {
  3. let index = parseInt(indexStr, 10);
  4. return values[index] !== undefined ? values[index] : '';
  5. });
  6. }
  7. let template = "于${0}通过${1}课程体系《${2}》课程授课";
  8. let dataTime = '2024 年 12月 06 日';
  9. let courseVersion = '<OEAC 14.0>';
  10. let courseName = '直播运营与策划(V14.0.0)';
  11. let descCn = formatString(template, dataTime, courseVersion, courseName);
  12. console.log(descCn);
  13. // 输出: 于2024 年 12月 06 日通过<OEAC 14.0>课程体系《直播运营与策划(V14.0.0)》课程授课

在这个函数中,我们使用了正则表达式 /\$\{(\d+)\}/g 来匹配所有的 ${n} 形式的占位符。这个正则表达式中的 \$ 匹配美元符号 $\{\} 分别匹配左大括号 { 和右大括号 },而 (\d+) 是一个捕获组,用于匹配并捕获一个或多个数字。

在替换函数中,我们通过 match 参数获取到整个匹配的字符串(即 ${n}),然后通过 indexStr 参数获取到捕获组中的数字字符串。我们将这个数字字符串转换为整数索引,并从 values 数组中获取对应的值进行替换。如果 values 数组中不存在对应的值,则替换为一个空字符串 ''


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

Boo<font Color='#ff5555'>tstrap单选框重叠问题

从bootstrap模板中复制出来就有两个重叠的现象 看源码是生成了两次 重复生成了,所以boostrap那个模板中页面也...

windows 自带ne<font Color='#ff5555'>tsh进行端口映射

使用netsh 把本地任意ip的25566端口 映射到192.168.81.234的25565端口netshinterfaceportproxyaddv4tov4listenaddress=0.0....

python安装pip以及使用pip安装reques<font Color='#ff5555'>ts等模块

pip很简单的介绍pip 是一个现代的,通用的 Python 包管理工具。提供了对 Python 包的查找、下载、安装、卸载的功能。如果想...

eChar<font Color='#ff5555'>ts中tooltip 基本样式问题处理

在echarts中遇到几个样式问题,现总结如下:1、tooltip中样式中 值换行在tooltip中修改加上一句代码formatter:&#39;{b0}:{c...

boo<font Color='#ff5555'>tstrap文字居中问题

静态页上面的效果是这样的可以看到文字和左边的下拉列表是居中的但是如果你直接复制过去可能就是这样的了我们来看看静态页...

boo<font Color='#ff5555'>tstrap动态生成单选框复选框等无法点击选中问题

bootstrap的单选框、复选框是要经过渲染的,然后才显示出来的经过渲染的是这样的没有经过渲染的就是最原始的样子所以它的选...

boo<font Color='#ff5555'>tstrap 栅格布局一小例子

效果很简单,就是显示一个头像与一个名字html:&lt;divclass=&quot;col-md-12&quot;style=&quot;margin-top:20px&quot;&gt;...

未找到导入项目 .wpp.targe<font Color='#ff5555'>ts。请确认 声明中路径正确<font Color='#ff5555'>,且磁盘上存在该文件

今天打开vs突然报了一个错..........wpp.targets。请确认 &lt;Import&gt; 声明中的路径正确,且磁盘上存在该文件重新新建一...

boo<font Color='#ff5555'>tstrap内容灰白背景

其实就是page-container-bg-solid 样式加上右边内容就有灰色的背景效果如下如果不加就是全白的背景、如果需要根据不同的内...

boo<font Color='#ff5555'>tstrap分页条样式

其实就是一个pagination即可&lt;divclass=&quot;dataTables_paginatepagination&quot;&gt; &lt;ulid=&quot;pagination&quo...

boo<font Color='#ff5555'>tstrap模板 form一点布局用法

bootstrap form的布局可以在form stuff里边看到,我们就复制form layouts里边的吧复制这里的我们实现一个简单的资源上传的页...

ASP.NET MVC + WebUploader+Boo<font Color='#ff5555'>tstrap实现文件上传进度条显示

引入需要的资源文件:&lt;scriptsrc=&quot;~/Content/jquery-1.9.1.min.js&quot;&gt;&lt;/script&gt; &lt;linkhref=&quot;...

boo<font Color='#ff5555'>tstrap中dataTables

就是这种直接支持页面分页,排序,搜索什么的注意需要相关的js和样式然后js把表格变成dataTable就可以了Bootstrap模板中使...

boo<font Color='#ff5555'>tstrap 勾选不需要列并记住状态

最近有个需求是要求记住这些没打勾的列因为不需要展示本来想建表去做一个状态选择,但是太麻烦了,会出现加载过慢的情况,...

当使用第三方 ne<font Color='#ff5555'>tstandard 类库时报错

web.config中加入以下代码&lt;system.web&gt; &lt;compilationdebug=&quot;true&quot;targetFramework=&quot;4.5&quot;&gt...

No<font Color='#ff5555'>tsupportedExCeption: HTTP/2 over TLS is not supported on Windows 7 due to missing

.net core grpc报错:NotSupportedException: HTTP/2 over TLS is not supported on Windows 7 due to missing ALPN suppor...
这一生多幸运赶上过你.
排名
8
文章
221
粉丝
7
评论
7
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术