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

初体验正则

首先要先明白正则表达式中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. Hibernate入门之注解@Column详解

    前言 上一节我们讲解了Hibernate的主键生成策略,本节我们继续来讲讲Hibernate中针对列的映射即@Column注解,文中若有错误之处,还望指正. @Column注解详解 我们看到如上针对列 ...

  2. 关于SSH与SSM的组成及其区别

    前言 当下SpringBoot盛行,咱再聊聊SpringBoot盛行之前的框架组合,当做复习巩固哈. 在聊之前,得先说说MVC,MVC全名是Model View Controller,是模型(mode ...

  3. 2018-05-04 圣杯布局 and 双飞翼布局，display:flex

    看到一个神奇的布局,啥都不说了 直接贴代码 要让main在中间,left在左边,可以通过Flex容器下的项目的属性“order”属性来设置:对于order属性:定义项目的排列顺序,越小越靠前,默认为0 ...

  4. django 从零开始 8 用户登录验证 待测

    看文档 djang 自带一个用户登录验证的方法,不过有些看着懵逼,去网上找了一圈,发现很多都是照抄文档说明的,几乎没说啥原理 特别是 from django.contrib.auth import a ...

  5. etcdctl的使用

    etcdctl是一个提供简洁命令的etcd客户端,使用etcdctl可以直接和etcd服务打交道,对etcd中的键值对进行增删改查. 安装etcdctl 下载etcdctl工具 下载地址:etcdct ...

  6. Ctrl+F5和F5区别

    F5刷新的内容是从本地缓存中读取刷新,刷新本地缓存 Ctrl+F5直接读取服务器上的最新的内容—— Ctrl+F5会把Internet 临时文件夹的文件删除再重新从服务器下载,也就是彻底刷新页面了.. ...

  7. JAVAEE学习day02

    1.数据类型的转换 1>自动转换(隐式) // 将取值范围小的数据类型自动提升为取值范围大的类型 // 定义byte类型数据 byte b = 10; // 定义short类型数据 short ...

  8. 微信小程序开发（一）开发准备

    微信小程序开发(一)开发准备 微信小程序,近几年,越来越火,应用场景越来越多,好大学习起来,比较容易,学习曲线平缓,你要是会前端开发,那简直可以用易如反掌来形容. 小程序,开发工具官方也提供了,他兼容 ...

  9. 写了个python脚本，循环执行某一个目录下的jmeter脚本————解决的问题，每次回归时，都得一个个拉取

    import os import time #需要你改的就这3个参数 #path是放你jmx脚本的文件夹路径 path="D:\\桌面\\每次都是从共享上考最新的\\" #jtl_ ...

  10. 基于Docker搭建Nginx图片服务器

    前言 一般开发中,都会把图片上传到一个目录,然后将目录和文件名拼接存储在数据库中,但是,这种方法如果没弄好的话可能有一定的缺陷. 若项目搬迁,即时这台服务器本身还在用,存放在服务器的跟项目相关的图片也 ...