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

初体验正则

首先要先明白正则表达式中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. React项目实战：react-redux-router基本原理

    React相关 React 是一个采用声明式,高效而且灵活的用来构建用户界面的框架. JSX 本质上来讲,JSX 只是为React.createElement(component, props, .. ...

  2. 响应式导航菜单（css+js）

    1.响应式导航菜单 先来看下效果图把: 当视口大于640px的时候,导航条会显示在外,当视口小于768px的时候,导航菜单需要隐藏起来!代码如下: <!doctype html> < ...

  3. 【jQuery学习日记】jQuery实现滚动动画

    需要实现的效果 样式分析: 2个主要部分,头部的标题和导航部分,和主要的功能实现区域: 1.头部 <div id="header"> <h1>动漫视频< ...

  4. Spring Cloud Feign 优雅的服务调用

    Fegin 是由NetFlix开发的声明式.模板化HTTP客户端,可用于SpringCloud 的服务调用.提供了一套更优雅.便捷的HTTP调用API,并且SpringCloud整合了Fegin.Eu ...

  5. 怎么用一行HTML代码搭建一个谷歌镜像?

    <iframe src="google.com"></iframe>

  6. Spring Cloud Gateway 实现Token校验

    在我看来,在某些场景下,网关就像是一个公共方法,把项目中的都要用到的一些功能提出来,抽象成一个服务.比如,我们可以在业务网关上做日志收集.Token校验等等,当然这么理解很狭隘,因为网关的能力远不止如 ...

  7. 解决IOS下window.open页面打不开问题

    问题如标题所写,在ajax回调里面拿到即将要跳转的链接url,使用window.open(linkUrl),没有起作用,而且代码也没有报错,查找原因是:大部分现代的浏览器(Chome/Firefox/ ...

  8. Pyppeteer入门（转载）

    一.简介 Puppeteer 是 Google 基于 Node.js 开发的一个工具,有了它我们可以通过 JavaScript 来控制 Chrome 浏览器的一些操作,当然也可以用作网络爬虫上,其 A ...

  9. dict的常用方法

    注:dic表示定义的一个字典变量,如:dic = {'name': 'shawn', 'age': 18} 增: 1.  dic['love'] = 'girl'  直接通过新的键值对进行添加 dic ...

  10. 深入理解计算机系统 (CS:APP) 缓冲区漏洞实验 – Buffer Lab 解析

    原文地址:https://billc.io/2019/05/csapp-cachelab/ 写在前面 这是 CSAPP 官网上的第 4 个实验 buflab,也是学校要求的第三个实验.这个实验比上一个 ...