模板字符串原理,原生js实现字符串模板

在使用模板字符串的时候使用的是 '{{}}'形式进行书写，本文则向各位解密这么写的原因

初体验正则

首先要先明白正则表达式中exec的使用

例如：

let str = 'axu1997@qq.com'

let reg = /\w*[@]\w*\.\w*/

console.log(reg.exec(str))  //会得到一个数组第0项是"axu1997@qq.com"

接下来给他加个括号，将"qq"对应的部分给提取出来(在\w中加)

let str = 'axu1997@qq.com'

let reg = /\w*[@](\w*)\.\w*/

console.log(reg.exec(str))  //会得到一个数组第0项是"axu1997@qq.com",第一项是'qq'

console.log(reg.exec(str[1])) //'qq'

小试牛刀

也就是说，当你给你的正则加上括号进行匹配时可以为返回的值添加更多的项，明白了这个之后看下面的代码,注意看注释部分的结果

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	</head>

	<body>

	</body>

	<script type="text/template" id="demotem">

		<h1>{{name}}</h1>

	</script>

	<script type="text/javascript">

		let tem = document.querySelector('#demotem').innerHTML

		let reg = /{{(\w*)}}/

		console.log(reg.exec(tem));    //打印出一个数组，第一项为{{name}} 第二项为name

	</script>

</html>

步入正轨

接着我们再对其进行一个改造

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

                <div id="demoBox"></div>

	</head>

	<body>

	</body>

	<script type="text/template" id="demotem">

		<h1>{{name}}</h1>

	</script>

	<script type="text/javascript">

		let tem = document.querySelector('#demotem').innerHTML

		let reg = /{{(\w*)}}/

                let user = {

                    name:'Monday'

                 }

                let arr = reg.exec(tem)

                let tem = tem.replace(arr[0],user[arr[1]])    //也就是将'{{name}}' 替换为 user[name]中的值

		document.getElementById('demoBox').innerHTML = tem//直接将结果输在界面上

	</script>

</html>

通过上面的代码我们可以看到字符串模板被替换为了我们想要的值，但只能匹配一次且并不完整 SO完善一下

完善一下

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

                <div id="demoBox"></div>

	</head>

	<body>

	</body>

	<script type="text/template" id="demotem">

		<h1>{{name}}</h1>

                <p>{{age}}</p>    //加多一行

	</script>

	<script type="text/javascript">

		let tem = document.querySelector('#demotem').innerHTML

		let reg = /{{(\w*)}}/

                let user = {

                    name:'Monday',

                    age:24    //加多一个属性

                 }

                let arr = []

                while(arr = reg.exec(tem)){    //这里解释下，将值赋给arr当arr存在，循环继续

                    let tem = tem.replace(arr[0],user[arr[1]])    //将界面中所有符合这个规则的元素都替换

                }

		document.getElementById('demoBox').innerHTML = tem    //直接将结果输在界面上

	</script>

</html>

最后最后，封装一下

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

                <div id="demoBox"></div>

	</head>

	<body>

	</body>

	<script type="text/template" id="demotem">

		<h1>{{name}}</h1>

		<p>{{age}}</p>

	</script>

	<script type="text/javascript">

		 let user = {

		    name:'Monday',

			age:"18"

		 }

                    //我们平常用字符串写的就是这样了吧

		 let html = template('demotem',user)

		 document.getElementById('demoBox').innerHTML = html

                //下面是封装的代码

		function template(id,obj){

			let tem = document.getElementById(id).innerHTML

			let reg = /{{(\w*)}}/

			let arr = []

			while( arr = reg.exec(tem) ){

				tem = tem.replace(arr[0],obj[arr[1]])

			}

			return tem

		}

	</script>

</html>

模板字符串原理,原生js实现字符串模板的更多相关文章

使用原生JS进行字符串转对象
字符串转对象目的工作中如果需要原生 JS 完成字符转对象的话可以通过 JSON.parse(str), 但是这个方法是ES5中才出现, 如果需要兼容低版本就需要其它方法使用原生 JS 解决字符串 ...
原生JS实现字符串分割
window.onload = function(){ var str = 'abc,dbc,qqq,aaa'; var sp = split(str,',')//与字符串的分隔符要一直. alert ...
原生js反转字符串
//直接操作 var str='nama';var rts=str.split('').reverse().join(''); //String上拓展方法String.prototype.revers ...
如何用原生js替换字符串中的某个字符（或字符串）为指定的字符串？
<html> <head><title>我的第一个 HTML 页面</title></head><script type=" ...
js 小工具-- 原生 js 去除空格
// 原生js 去除字符串空格 <script type="text/javascript"> String.prototype.trim = function (){ ...
[Vue源码]一起来学Vue模板编译原理（二）-AST生成Render字符串
本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅一起来学V ...
前后端数据交互处理基于原生JS模板引擎开发
json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...
c#字符串加载wpf控件模板代码 - 简书
原文:c#字符串加载wpf控件模板代码 - 简书 ResourceManager resManagerA = new ResourceManager("cn.qssq666.Properti ...
【字符串】【P5830】【模板】失配树
[字符串][P5830] [模板]失配树 Description 给定一个长度为 \(n\) 的字符串 \(S\),有 \(m\) 次询问,每次询问给定 \(S\) 的两个前缀,求它们的最长公共 bo ...

随机推荐

MySQL学习之路一 : MySQL 5.7.19 源码安装
MySQL 5.7.19 源码安装查看系统: # cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) 安装依赖包 # yum - ...
kali linux下运行.sh文件权限不够解决办法
我要装一个生成免杀的神奇,系统提示权限不够 2 于是我想到了sudo,可还是不行 3 于是找到了方法 chmod a+x 文件名 4 再运行一下,成功 5 有时有的方法很简答,只要你愿意找.
NLP（二十二）利用ALBERT实现文本二分类
在文章NLP(二十)利用BERT实现文本二分类中,笔者介绍了如何使用BERT来实现文本二分类功能,以判别是否属于出访类事件为例子.但是呢,利用BERT在做模型预测的时候存在预测时间较长的问题.因此 ...
Swagger2 最全注解说明
原文链接:https://blog.csdn.net/xiaojin21cen/article/details/78654652 文章目录1.swagger2 注解整体说明2.@Api:请求类的说明3 ...
正式学习MVC 03
1.View -> Controller的数据通信 1) 通过url查询字符串 public ActionResult Index(string user) { return Content(u ...
使用HBuilder开发移动APP：ajax调用接口数据
既然要做APP,与接口交互式少不了的,除非只是想做一个纯静态的APP.所以html5+的环境准备好后,我最先开始研究的就是如何与接口交互. 使用HBuilder新建示例教程后,里面会有一个ajax(网 ...
前端每日实战：123# 视频演示如何用纯 CSS 创作一架双冀飞机
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxVYRL 可交互视频此视频是可 ...
【MySQL 原理分析】之 Explain & Trace 深入分析全模糊查询走索引的原理
一.背景今天,交流群有一位同学提出了一个问题.看下图: 之后,这位同学确实也发了一个全模糊查询走索引的例子: 到这我们可以发现,这两个sql最大的区别是:一个是查询全字段(select *),而一个 ...
git涨姿势（一）
今天遇到了一个git冲突问题,解决冲突方案我是当然知道的,就是本地不知道何时自己傻不拉几的新建了一个relese分支,而remote是没有release分支的,需要拉取的是release/V1.4.2 ...
NTP网络时钟服务器品牌
NTP网络时钟服务器品牌在科技的不断进步和发展下,时钟的种类和功能也在发生着变化,以满足人们的各种需求,时钟从原始的机械时钟发展成具有多钟功能的时钟.而时钟服务器主要是给时钟提供时间信息的,时钟服务 ...