模板字符串原理,原生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 ...

随机推荐

java集合-set
#java集合-set Map用于存储key-value的映射,其中key的值是不能重复的.并且还需要正确的覆写equals方法和hashCode方法如果我们只需要存储不重复的key,并不需要存储对 ...
Java程序员考研失败后的面试经历，oppo、VIVO、等面经
温馨提示:有些可能会遗漏个别问题,都是最近一周的面试,有点忘了. 浪潮(一面挂) 你是网络工程的?对网络很了解? 解释一下什么是广播域怎么划分子网说一下CSS的几种分类器数据库中有哪些聚集函 ...
Linux +Docker +Nginx 部署代理转发初探
很多开发人员仅仅只会码代码,如果让开发人员部署一些深入点的东西,或者做负载均衡等,很多开发人员估计就懵逼了,作为一个专业的开发还需要懂一些基本的运维知识:虽然说在互联网行业中,中小企业都有一个牛逼的运 ...
为XHR对象所有方法和属性提供钩子全局拦截AJAX
摘要 ✨长文阅读约需十分钟 ✨跟着走一遍需要一小时以上 ✨约100行代码前段时间打算写一个给手机端用的假冒控制台可以用来看console的输出这一块功能目前已经完成了但是后来知道有一个腾讯团 ...
LeetCode 81.Search in Rotated Sorted Array II(M)
题目: Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. ( ...
Lambda 语法
1.java8 Lambda表达式语法简介 (此处需要使用jdk1.8或其以上版本) Lambd表达式分为左右两侧 * 左侧:Lambda 表达式的参数列表 * 右侧:Lambda 表达式中所需要执行 ...
Flutter环境搭建以及快捷命令
Flutter环境搭建配置环境变量用户变量 FLUTTER_STORAGE_BASE_URL : https://storage.flutter-io.cn PUB_HOSTED_URL : ht ...
SQLi-Labs之1~6关 - 常规注入与盲注
年初五财神入第一关联合注入 1.准备 2.加'截断 3.order by 判断查询列数 4.同上 5.联合查询判断字段位置 6.查数据库名 7.1 查表名 7.2 查列名 8.查数据第二关不 ...
Azure CLI 简单入门
Azure CLI 是什么 Azure 命令行接口 (CLI) 是用于管理 Azure 资源的 Microsoft 跨平台命令行体验. Azure CLI 易于学习,是构建适用于 Azure 资源的自 ...
R中character和factor的as.integer的不同
记录一个容易犯错的地方. 用chr标记的0~1变量可以变为整数0和1, 而用因子factor标记的变量转换为整数时总是从1开始. 如果不注意区分就会发生令自己困惑的错误.