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

初体验正则

首先要先明白正则表达式中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实现字符串模板的更多相关文章

  1. 使用原生JS进行字符串转对象

    字符串转对象 目的 工作中如果需要原生 JS 完成字符转对象的话可以通过 JSON.parse(str), 但是这个方法是ES5中才出现, 如果需要兼容低版本就需要其它方法 使用原生 JS 解决字符串 ...

  2. 原生JS实现字符串分割

    window.onload = function(){ var str = 'abc,dbc,qqq,aaa'; var sp = split(str,',')//与字符串的分隔符要一直. alert ...

  3. 原生js反转字符串

    //直接操作 var str='nama';var rts=str.split('').reverse().join(''); //String上拓展方法String.prototype.revers ...

  4. 如何用原生js替换字符串中的某个字符（或字符串）为指定的字符串？

    <html> <head><title>我的第一个 HTML 页面</title></head><script type=" ...

  5. js 小工具-- 原生 js 去除空格

    // 原生js 去除字符串空格 <script type="text/javascript"> String.prototype.trim = function (){ ...

  6. [Vue源码]一起来学Vue模板编译原理（二）-AST生成Render字符串

    本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...

  7. 前后端数据交互处理基于原生JS模板引擎开发

    json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...

  8. c#字符串加载wpf控件模板代码 - 简书

    原文:c#字符串加载wpf控件模板代码 - 简书 ResourceManager resManagerA = new ResourceManager("cn.qssq666.Properti ...

  9. 【字符串】【P5830】 【模板】失配树

    [字符串][P5830] [模板]失配树 Description 给定一个长度为 \(n\) 的字符串 \(S\),有 \(m\) 次询问,每次询问给定 \(S\) 的两个前缀,求它们的最长公共 bo ...

随机推荐

  1. Think 框架漏洞利用

    下午有点闲,又没有女朋友陪,该干嘛呢??? 对了,做安全的是不需要女朋友的,哈哈哈哈哈 废话不多说,本机搭建环境: 首先nmap扫描一下,哦哈,有点东西. 开的端口有点多,这个时候有点窃喜,开的端口太 ...

  2. CentOS 7下Apache + PHP + MySQL环境（LAMP）的安装

    Step 1:更换阿里云 yum 源 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7 ...

  3. 一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY

    一. 客户区坐标位置(clientX,clientY) 鼠标事件都是在浏览器视口中的特定位置发生的.这个位置信息保存在事件对象的clientX和clientY属性中,所有浏览器都支持这两个属性. 我们 ...

  4. 使用timeit测试Python函数的性能

    timeit是Python标准库内置的小工具,可以快速测试小段代码的性能. 认识timeit timeit 函数: timeit.timeit(stmt, setup,timer, number) 参 ...

  5. Python基础-生物信息：找出基因，生物学家使用字母A、C、T和G构成的字符串建模一个基因组。

    生物信息:找出基因,生物学家使用字母A.C.T和G构成的字符串建模一个基因组.一个基因是基因组的子串,它从三元组ATG后开始在三元组TAG.TAA或TGA之前结束.此外,基因字符串的长度是3的倍数,而 ...

  6. 细说集群技术（Cluster）

    今天本人给大家讲解一些我对集群技术一个理解,如有不对的或者讲的不好的可以多多提出,我会进行相应的更改,先提前感谢提出意见的各位了!!! 集群(Cluster)技术:通过此可以用较低的成本获取较高的性能 ...

  7. 复习笔记——1. C语言基础知识回顾

    1. 数据类型 1.1 基本数据类型 整型:int, long,unsigned int,unsigned long,long long-- 字符型:char 浮点型:float, double-- ...

  8. libra共识算法分析

    ​​ 核心算法说明 基于chained实现,整体上是当前轮推动下一轮共识继续下去, 如此来持续运转下去, 数据有效性证明基于(QC)实现 leader广播proposal消息{round, qc, p ...

  9. Django Queryset增加manager

    **#定义一个新的过滤规则,这里是过滤状态为发布的帖子** **class PublishedManager(models.Manager):**        **def get_queryset( ...

  10. 波兰政府在继韩国之后也增加了对 Linux 的使用

    导读 前段时间, 韩国政府起草了一项战略,准备采用基于 Linux 的开源操作系统全面取代 Windows 7,以摆脱对其的依赖. 目前,波兰的社会保险公司 ZUS( Zakład Ubezpiecz ...