正则表达式实现ES6字符串模板功能

最新推荐文章于 2022-02-17 16:40:14 发布
最新推荐文章于 2022-02-17 16:40:14 发布
阅读量1.8k 收藏 1
点赞数 2
分类专栏： 前端开发 文章标签： 模板字符串 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40882724/article/details/82462800
版权
本文介绍了如何利用正则表达式来实现类似ES6模板字符串的功能。作者探讨了ES6模板字符串的便利性，并展示了通过正则表达式解析字符串，自动替换占位符为变量值的方法，从而达到相同的效果。
摘要由CSDN通过智能技术生成

前言：

早上在地铁里，看到一篇文章说是用正则实现ES6字符串模板，没看细节，好奇心来了，我也实现一下。

ES6模板字符串

  • 语法：我爱{ lover },会自动读取当前上下里变量lover的值并填充上去
  • 相当方便,省去了拼接字符串导致的繁琐和易错，尤其是在DOM操作innerHTML里

开搞

实现将字符串"我叫${ me }，爱人是${ lover },${ lover }很爱我."里的占位符用变量代替。

function template(string){
   
    let reg = /\${([^{}]*)}/g;
    return string.replace(reg,function(match,p1){
最低0.47元/天 解锁文章
寻梦皮皮虾
关注
专栏目录
正则实现模板字符串
qq_42530294的博客
05-28 522
function template(string, data) { let res = string.replace(/\${(\w*)}/g, function (match, $index) { return data[$index] }) return res } console.log(template('您已购买${count}种共${amount}件商品，总价${totalPrice}元', { amount: 10, count: 3,
史上最全常用正则表达式
红豆技术栈
04-13 803
很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。 一、校验数字的表达式 数字：^[0-9]*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$
JavaScript|es6字符串模板实现(含测试源码)
执念斩长河
05-27 405
在使用字符串的时候将多项式的内容融合进去，将变量替换为内容是让部分程序猿头疼的问题。在es6中完美的解决这个问题。大家看个例子就能明白了，这个例子简直可以应用到项目的节奏！
js--Es6字符串模板
别浪
06-25 1093
作用:简化字符串拼接 tab键上面的反引号 ` ${变量名}`
正则表达式使用 ES6 的模板字符串
shiyutim
10-22 2362
有时候可能需要使用动态的验证某个内容，所以如果正则表达式能够使用变量就好了，但是通过 /\w/ 这种方式声明的正则，是不能够使用模板字符串的。那么能够使用模板字符串的方式是使用 new 命令： let count = 1 let reg = new RegExp(`a${count}`, 'gi') 通过 new 来创建一个表达式，就可以使用 ES6 的模板字符串了。 ...
JavaScript基于replace+正则实现ES6的字符串模版功能
10-19
在探讨JavaScript中使用replace和正则表达式来实现类似ES6模板字符串的功能时，首先需要了解ES6模板字符串的核心特性。模板字符串使用反引号(` `)代替传统单引号(' ')或双引号(" ")来定义字符串，并允许嵌入表达式。...
ES6 （四）字符串的新增方法、Unicode正规化、字符串替换、正则表达式替换
qq_43456781的博客
08-02 1381
ES6 （四）字符串的新增方法、Unicode正规化、字符串替换、正则表达式替换 文章目录ES6 （四）字符串的新增方法、Unicode正规化、字符串替换、正则表达式替换1. String.fromCodePoint()2. String.raw()3. 实例方法：codePointAt()4. 实例方法：normalize()5. 实例方法：includes(), startsWith(), endsWith()6. 实例方法：repeat()7. 实例方法：padStart()，padEnd()8. 实
《深入理解ES6》——字符串和正则表达式
杜小白的博客
09-26 546
字符串中的子串识别     子javascript首次被使用以来，开发者们就开始使用indexOf()方法来在一段字符串中检测另一段字符串，在ES6中，提供以下三种类似的方法可以达到相同效果： includes()方法，如果在字符串中检测到指定文本则返回true，否则返回false startsWith()方法，如果在字符串中的起始部分检测到指定文本则返回true，否则返回false en...
ES6中实现简单的字符串模板渲染（拼接插入字符串）
htcvive的博客
03-15 3481
字符串拼接方法 我们都知道，在ES5中字符串拼接方法比较繁琐。同一条字符串不能换行且要频繁用+拼接字符串。以拼接几个为例 ES5字符串拼接： for(var i = 0 ; i < 100 ; i ++){ html += '<li class="box">' +'<span>hello&lt...
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
11-20
最近业务上需要动态渲染模板数据，好久没写前端代码了，有点生疏，将思路简单写下来，防老： 一、业务需求： 1.前端后端定义好模板以及变量名，保存数据库 2.订单数据是前端根据支付结果获取的，最终渲染完的数据模板需要调用打印机打印出来 3.模板相对商家来说比较固定，但是每个商家需要的模板都有可能不一样，所以需要每次登录后，查询一次模板缓存前端，后续每次支付后，动态渲染数据即可 二、考点： 1.正则表达式 2.精简代码量，尽量减少前端的工作量​ 三、实现思路： 1.需要渲染数据的模板，以${变量名}区分： var t="银行：${bankName}，商家名称：${merchantName}，订单号：
Java用正则表达式实现${name}形式的字符串模板实例
08-31
主要给大家介绍了Java如何用正则表达式实现${name}形式的字符串模板，文章给出详细的实例代码，对大家的理解和学习会很有帮助，有需要的朋友们下面来一起看看吧。
ES6的模板字符串这么好用，自己动手实现一个类模板字符串吧！！！
帅帅邬同学的博客
08-13 518
使用gulp压缩图片 第一步： cnpm i gulp-livereload -D cnpm i -g http-server 第二步： 书写gulpfile.js文件： 代码如下： const gulp=require('gulp'); const livereload=require('gulp-livereload'); const babel=require('gulp-babel'); const uglify=require('gulp-uglify'); const concat=requi
ES6-正则的扩展-字符串的正则方法
极北
10-31 286
字符串对象共有4个方法，可以使用正则表达式：math()、replace()、search()和split()。 ES6将这4个方法，在语言内部全部调用 RegExp 的实例方法，从而做到所有与正则相关的方法，全部定义在 RegExp 对象上。   String.prototype.match 调用 RegExp.prototype[Symbol.match] String.prototy...
【前端】模板字符串与正则表达式
A_KID的博客
02-17 821
写Form表单，难免就要涉及到表单验证 然而…众多的表单的验证大同小异，书写和维护起来都非常头疼 那，有什么方法可以简化后期修改和维护的成本呢？ 通过模板字符串来表达正则表达式 英文字母、数字、汉字或-，-不能在开头或结尾，字符串最多63个字符 一般方法： pattern : /^[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]{0,1}$/ 采用模板字符串： const Az09Ch = 'A-Za-z0-9\u4e00-\u9fa5' const.
ES6笔记-正则表达式和字符串正则方法
weixin_30294709的博客
04-29 101
RegExp构造函数 在ES5中，RegExp构造函数的参数有两种情况。 第一种情况是，参数是字符串，这时第二个参数表示正则表达式的修饰符（flag）。 var regex = new RegExp('xyz', 'i'); // 等价于 var regex = /xyz/i; 第二种情况是，参数是一个正则表示式，这时会返回一个原有正则表达式的拷贝。 var regex =...
[es6学习笔记]字符串和正则表达式
buerno的博客
04-09 174
UTF-16码位：    es5中所有的字符采用16位编码形式    有些中文超过16位，则用两位显示，则显示出来的不会正确let text='
正则表达式占位符的使用
totally123的专栏
11-26 4772
$1，$2表达的是小括号里面的内容，$1是第一个小括号里的内容，$2是第二个小括号里面的内容，依此类推 比如(\d{4})(\d{2})(\d{2}) 匹配"20190919" $1是第一个括号里匹配的2019 $2是第二个括号里匹配的09 $3是第三个括号里匹配的19 ...
正则表达式库——re库
qq_41734243的博客
04-20 807
正则表达式
ES6中的字符串与正则表达式新特性解析
"本文详细探讨了ES6中字符串和正则表达式的新特性，包括Unicode支持的改进、新的字符串处理方法以及正则表达式的新功能。文章通过实例代码讲解，适合学习ES6的开发者参考。" 在ES6中，字符串和正则表达式得到了显著...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值