一行代码实现一个简单的模板字符串替换_ 网站前端开发_前端开发者

网站前端开发_前端开发者丨JavaScript

https://www.rokub.com

起始同许多初学Javascript的菜鸟一样,起初,我也是采用拼接字符串的形式,将JSON数据嵌入html中。
开始时代码量较少,暂时还可以接受。
但当页面结构复杂起来后,其弱点开始变得无法忍受起来:书写不连贯。
每写一个变量就要断一下,插入一个+和“。
十分容易出错。无法重用。
html片段都是离散化的数据,难以对其中重复的部分进行提取。
片段都是离散化的数据,难以对其中重复的部分进行提取。
无法很好地利用<tempalte>标签。
这是HTML5中新增的一个标签,标准极力推荐将html模板放入<template>标签中,使代码更简洁。
当时我的心情就是这样的:这TMD是在逗我吗。
于是出来了后来的ES6,ES6的模板字符串用起来着实方便,对于比较老的项目,项目没webpack,gulp等构建工具,无法使用ES6的语法,但是想也借鉴这种优秀的处理字符串拼接的方式,我们不妨可以试着自己写一个,主要是思路,可以使用ES6语法模拟ES6的模板字符串的这个功能。后端返回的一般都是JSON的数据格式,所以我们按照下面的规则进行模拟。
需求描述实现一个render(template,context)方法,将template中的占位符用context填充。
要求:不需要有控制流成分(如循环、条件等等),只要有变量替换功能即可级联的变量也可以展开被转义的的分隔符{和}不应该被渲染,分隔符与变量之间允许有空白字符var obj={name:\”二月\”,age:\”15\”};var str=\”{{name}}很厉害,才{{age}}岁\”;输出:二月很厉害,才15岁。
<strong>PS:本文需要对<ahref=\”https://github.com/jawil/blog/issues/20\”>正则表达式</a>有一定的了解,如果还不了解<ahref=\”https://github.com/jawil/blog/issues/20\”>正则表达式</a>,建议先去学习一下,正则也是面试笔试必备的技能,上面链接末尾有不少正则学习的链接。
</strong>123var obj={name:\”二月\”,age:\”15\”};var str=\”{{name}}很厉害,才{{age}}岁\”;输出:二月很厉害,才15岁。
<strong>PS:本文需要对<ahref=\”https://github.com/jawil/blog/issues/20\”>正则表达式</a>有一定的了解,如果还不了解<ahref=\”https://github.com/jawil/blog/issues/20\”>正则表达式</a>,建议先去学习一下,正则也是面试笔试必备的技能,上面链接末尾有不少正则学习的链接。
</strong>如果是你,你会怎么实现?可以先尝试自己写写,实现也不难。
先不说我的实现,我把这个题给其他好友做的时候,实现的不尽相同,我们先看几位童鞋的实现,然后在他们的基础上找到常见的误区以及实现不够优雅的地方。
二月童鞋:
letstr=\”{{name}}很厉害,才{{age}}岁\”letobj={name:’二月’,age:15}functiontest(str,obj){let_s=str.replace(/{{(w+)}}/g,’$1′)letresultfor(letkinobj){_s=_s.replace(newRegExp(k,’g’),obj[k])}return_s}consts=test(str,obj)1234567891011letstr=\”{{name}}很厉害,才{{age}}岁\”letobj={name:’二月’,age:15}functiontest(str,obj){let_s=str.replace(/{{(w+)}}/g,’$1′)letresultfor(letkinobj){_s=_s.replace(newRegExp(k,’g’),obj[k])}return_s}consts=test(str,obj)最基本的是实现了,但是代码还是有很多问题没考虑到,首先Object的key值不一定只是w,还有就是如果字符串是这种的:letstr=\”{{name}}很name厉害,才{{age}}岁\”`会输出:二月很厉害二月害,才15岁12letstr=\”{{name}}很name厉害,才{{age}}岁\”`会输出:二月很厉害二月害,才15岁此处你需要了解正则的分组才会明白$1的含义,错误很明显,把本来就是字符串不要替换的name也给替换了,从代码我们可以看出二月的思路。
代码的作用目标是str,先用正则匹配出{{name}}和{{age}},然后用分组获取括号的name,age,最后用replace方法把{{name}}和{{age}}替换成name和age,最后字符串就成了name很name厉害,才age岁,最后forin循环的时候才导致一起都被替换掉了。
用forin循环完全没必要,能不用forin尽量不要用forin,forin会遍历自身以及原型链所有的属性。
志钦童鞋:var str=\”{{name}}很厉害,才{{age}}岁\”;var str2=\”{{name}}很厉name害,才{{age}}岁{{name}}\”;var obj={name:’周杰伦’,age:15};functionfun(str,obj){var arr;arr=str.match(/{{[a-zA-Zd]+}}/g);for(var i=0;i<arr.length;i++){arr[i]=arr[i].replace(/{{|}}/g,”);str=str.replace(‘{{‘+arr[i]+’}}’,obj[arr[i]]);}returnstr;}console.log(fun(str,obj));console.log(fun(str2,obj));123456789101112131415var str=\”{{name}}很厉害,才{{age}}岁\”;var str2=\”{{name}}很厉name害,才{{age}}岁{{name}}\”;var obj={name:’周杰伦’,age:15};functionfun(str,obj){var arr;arr=str.match(/{{[a-zA-Zd]+}}/g);for(var i=0;i<arr.length;i++){arr[i]=arr[i].replace(/{{|}}/g,”);str=str.replace(‘{{‘+arr[i]+’}}’,obj[arr[i]]);}returnstr;}console.log(fun(str,obj));console.log(fun(str2,obj));思路是正确的,知道最后要替换的是{{name}}和{{age}}整体,而不是像二月童鞋那样最后去替换name,所有跑起来肯定没问题,实现是实现了但是感觉有点那个,我们要探讨的是一行代码也就是代码越少越好。
小维童鞋:
functiona(str,obj){var str1=str;for(var keyinobj){var re=newRegExp(\”{{\”+key+\”}}\”,\”g\”);str1=str1.replace(re,obj[key]);}console.log(str1);}conststr=\”{{name}}很厉name害{{name}},才{{age}}岁\”;constobj={name:\”jawil\”,age:\”15\”};a(str,obj);实现的已经简单明了了,就是把<code>obj</code>的<code>key</code>值遍历,然后拼成<code>{{key}}</code>,最后用<code>obj[key]</code>也就是<code>value</code>把<code>{{key}}</code>整个给替换了,思路很好,跟我最初的版本一个样。
1234567891011functiona(str,obj){var str1=str;for(var keyinobj){var re=newRegExp(\”{{\”+key+\”}}\”,\”g\”);str1=str1.replace(re,obj[key]);}console.log(str1);}conststr=\”{{name}}很厉name害{{name}},才{{age}}岁\”;constobj={name:\”jawil\”,age:\”15\”};a(str,obj);实现的已经简单明了了,就是把<code>obj</code>的<code>key</code>值遍历,然后拼成<code>{{key}}</code>,最后用<code>obj[key]</code>也就是<code>value</code>把<code>{{key}}</code>整个给替换了,思路很好,跟我最初的版本一个样。
我的实现:functionparseString(str,obj){Object.keys(obj).forEach(key=>{str=str.replace(newRegExp(`{{${key}}}`,’g’),obj[key]);});returnstr;}conststr=\”{{name}}很厉name害{{name}},才{{age}}岁\”;constobj={name:\”jawil\”,age:\”15\”};console.log(parseString(str,obj));123456789functionparseString(str,obj){Object.keys(obj).forEach(key=>{str=str.replace(newRegExp(`{{${key}}}`,’g’),obj[key]);});returnstr;}conststr=\”{{name}}很厉name害{{name}},才{{age}}岁\”;constobj={name:\”jawil\”,age:\”15\”};console.log(parseString(str,obj));其实这里还是有些问题的,首先我没用for…in循环就是为了考虑不必要的循环,因为for…in循环会遍历原型链所有的可枚举属性,造成不必要的循环。
我们可以简单看一个例子,看看for…in的可怕性。
Chromev63constdiv=document.createElement(‘div’);letm=0;for(letkindiv){m++;}letn=0;console.log(m);231console.log(Object.keys(div).length);0123456789Chromev63constdiv=document.createElement(‘div’);letm=0;for(letkindiv){m++;}letn=0;console.log(m);231console.log(Object.keys(div).length);0一个DOM节点属性竟然有这么多的属性,列举这个例子只是让大家看到forin遍历的效率问题,不要轻易用forin循环,通过这个DOM节点之多也可以一定程度了解到React的VirtualDOM的思想和优越性。除了用forin循环获取obj的key值,还可以用Object.key()获取,Object.getOwnPropertyNames()以及Reflect.ownKeys()也可以获取,那么这几种有啥区别呢?这里就简单说一下他们的一些区别。for…in循环:会遍历对象自身的属性,以及原型属性,for…in循环只遍历可枚举(不包括enumerable为false)属性。像Array和Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性;Object.key():可以得到自身可枚举的属性,但得不到原型链上的属性;Object.getOwnPropertyNames():可以得到自身所有的属性(包括不可枚举),但得不到原型链上的属性,Symbols属性也得不到.Reflect.ownKeys:该方法用于返回对象的所有属性,基本等同于Object.getOwnPropertyNames()与Object.getOwnPropertySymbols之和。
上面说的可能比较抽象,不够直观。
可以看个我写的DEMO,一切简单明鸟。
constparent={a:1,b:2,c:3};constchild={d:4,e:5,[Symbol()]:6};child.__proto__=parent;Object.defineProperty(child,\”d\”,{enumerable:false});for(var attrinchild){console.log(\”for…in:\”,attr);a,b,c,e}console.log(\”Object.keys:\”,Object.keys(child));[‘e’]console.log(\”Object.getOwnPropertyNames:\”,Object.getOwnPropertyNames(child));[‘d’,’e’]console.log(\”Reflect.ownKeys:\”,Reflect.ownKeys(child));[‘d’,’e’,Symbol()]12345678910111213141516171819constparent={a:1,b:2,c:3};constchild={d:4,e:5,[Symbol()]:6};child.__proto__=parent;Object.defineProperty(child,\”d\”,{enumerable:false});for(var attrinchild){console.log(\”for…in:\”,attr);a,b,c,e}console.log(\”Object.keys:\”,Object.keys(child));[‘e’]console.log(\”Object.getOwnPropertyNames:\”,Object.getOwnPropertyNames(child));[‘d’,’e’]console.log(\”Reflect.ownKeys:\”,Reflect.ownKeys(child));[‘d’,’e’,Symbol()]最后实现上面的实现其实已经很简洁了,但是还是有些不完美的地方,通过MDN首先我们先了解一下replace的用法。
通过文档里面写的str.replace(regexp|substr,newSubStr|function),我们可以发现replace方法可以传入function回调函数,function(replacement)一个用来创建新子字符串的函数,该函数的返回值将替换掉第一个参数匹配到的结果。参考这个指定一个函数作为参数。
有了这句话,其实就很好实现了,先看看具体代码再做下一步分析。functionrender(template,context){returntemplate.replace(/{{(.*?)}}/g,(match,key)=>context[key]);}consttemplate=\”{{name}}很厉name害,才{{age}}岁\”;constcontext={name:\”jawil\”,age:\”15\”};console.log(render(template,context));123456functionrender(template,context){returntemplate.replace(/{{(.*?)}}/g,(match,key)=>context[key]);}consttemplate=\”{{name}}很厉name害,才{{age}}岁\”;constcontext={name:\”jawil\”,age:\”15\”};console.log(render(template,context));可以对照上面文档的话来做分析:该函数的返回值(obj[key]=jawil)将替换掉第一个参数(match=={{name}})匹配到的结果。
简单分析一下:.*?是正则固定搭配用法,表示非贪婪匹配模式,尽可能匹配少的,什么意思呢?举个简单的例子。
先看一个例子:源字符串:aa<div>test1</div>bb<div>test2</div>cc正则表达式一:<div>.*</div>匹配结果一:<div>test1</div>bb<div>test2</div>正则表达式二:<div>.*?</div>匹配结果二:<div>test1</div>(这里指的是一次匹配结果,不使用/g,所以没包括<div>test2</div>)123456789源字符串:aa<div>test1</div>bb<div>test2</div>cc正则表达式一:<div>.*</div>匹配结果一:<div>test1</div>bb<div>test2</div>正则表达式二:<div>.*?</div>匹配结果二:<div>test1</div>(这里指的是一次匹配结果,不使用/g,所以没包括<div>test2</div>)根据上面的例子,从匹配行为上分析一下,什是贪婪与非贪婪匹配模式。利用非贪婪匹配模就能匹配到所有的{{name}},{{age}},上面的也说到过正则分组,分组匹配到的就是name,也就是function的第二个参数key。
所以这行代码的意思就很清楚,正则匹配到{{name}},分组获取name,然后把{{name}}替换成obj[name](jawil)。当然后来发现还有一个小问题,如果有空格的话就会匹配失败,类似这种写法:consttemplate=\”{{name}}很厉name害,才{{age}}岁\”;1consttemplate=\”{{name}}很厉name害,才{{age}}岁\”;所以在上面的基础上还要去掉空格,其实也很简单,用正则或者String.prototype.trim()方法都行。
functionrender(template,context){returntemplate.replace(/{{(.*?)}}/g,(match,key)=>context[key.trim()]);}consttemplate=\”{{name}}很厉name害,才{{age}}岁\”;constcontext={name:\”jawil\”,age:\”15\”};console.log(render(template,context));<strong>将函数挂到String的原型链,得到最终版本</strong>123456functionrender(template,context){returntemplate.replace(/{{(.*?)}}/g,(match,key)=>context[key.trim()]);}consttemplate=\”{{name}}很厉name害,才{{age}}岁\”;constcontext={name:\”jawil\”,age:\”15\”};console.log(render(template,context));<strong>将函数挂到String的原型链,得到最终版本</strong>甚至,我们可以通过修改原型链,实现一些很酷的效果:String.prototype.render=function(context){returnthis.replace(/{{(.*?)}}/g,(match,key)=>context[key.trim()]);};123String.prototype.render=function(context){returnthis.replace(/{{(.*?)}}/g,(match,key)=>context[key.trim()]);};如果{}中间不是数字,则{}本身不需要转义,所以最终最简洁的代码:String.prototype.render=function(context){returnthis.replace(/{{(.*?)}}/g,(match,key)=>context[key.trim()]);};之后,我们便可以这样调用啦:123String.prototype.render=function(context){returnthis.replace(/{{(.*?)}}/g,(match,key)=>context[key.trim()]);};之后,我们便可以这样调用啦:\”{{name}}很厉name害,才{{age}}岁\”.render({name:\”jawil\”,age:\”15\”});1\”{{name}}很厉name害,才{{age}}岁\”.render({name:\”jawil\”,age:\”15\”});收获通过一个小小的模板字符串的实现,领悟到要把一个功能实现不难,要把做到完美真是难上加难,需要对基础掌握牢固,有一定的沉淀,然后不断地打磨才能比较优雅的实现,通过由一个很小的点往往可以拓展出很多的知识点。

网站前端开发_前端开发者丨JavaScript

https://www.rokub.com

» 本文来自:前端开发者 » 《一行代码实现一个简单的模板字符串替换_ 网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/2372.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!