位置: 编程技术 - 正文
Javascript 字符串模板的简单实现(Javascript 字符串拼接)
编辑：rootadmin推荐整理分享Javascript 字符串模板的简单实现(Javascript 字符串拼接)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:javascript 字符串转字节,javascript 字符串转字节,javascript 字符串长度,Javascript 字符串数组,javascript字符串转换为数字,javascript 字符串转字节,Javascript 字符串拼接,javascript字符串大小写转换,内容如对您有帮助，希望把文章链接给更多的朋友！
这是源于两年前，当我在做人生中第一个真正意义上的网站时遇到的一个问题
该网站采用前后端分离的方式，由后端的 REST 接口返回 JSON 数据，再由前端渲染到页面上。
同许多初学 Javascript 的菜鸟一样，起初，我也是采用拼接字符串的形式，将 JSON 数据嵌入 HTML 中。开始时代码量较少，暂时还可以接受。但当页面结构复杂起来后，其弱点开始变得无法忍受起来：
书写不连贯。每写一个变量就要断一下，插入一个 + 和 "。十分容易出错。 无法重用。HTML 片段都是离散化的数据，难以对其中重复的部分进行提取。 无法很好地利用 <template> 标签。这是 HTML5 中新增的一个标签，标准极力推荐将 HTML 模板放入 <template> 标签中，使代码更简洁。 当时我的心情就是这样的：这TMD是在逗我吗
为了解决这个问题，我暂时放下了手上的项目，花了半个小时实现一个极简易的字符串模板。
需求描述
实现一个 render(template, context) 方法，将 template 中的占位符用 context 填充。要求：
不需要有控制流成分（如 循环、条件 等等），只要有变量替换功能即可级联的变量也可以展开被转义的的分隔符 { 和 } 不应该被渲染，分隔符与变量之间允许有空白字符例子：
实现
先写下函数的框架：
显然，要做的第一件事便是 匹配模板中的占位符。
匹配占位符
匹配的事，肯定是交给正则表达式来完成。那么，这个正则表达式应该长什么样呢？
根据 需求 1、2 的描述，我们可以写出：
至于需求 3，我第一个想到的概念是 前向匹配，可惜 Javascript 并不支持，只好用一个折衷的办法：
占位符替换
嗯，正则表达式确定了，接下来要做的便是替换工作。
根据 需求2，模板引擎不仅要能渲染一级变量，更要渲染多级变量。这该怎么做呢？
其实很简单：将 token 按 . 分隔开，逐级查找即可：
不过，有可能 token 指定的变量并不存在，这时上面的代码便会报错。为了更好的体验，代码最好有一定的容错能力：
把所有的代码组合在一起，便得到了最终的版本：
除去空白行，一共 行。
将函数挂到 String 的原型链
甚至，我们可以通过修改原型链，实现一些很酷的效果：
之后，我们便可以这样调用啦：
JavaScript常用数组算法小结 今天抽点时间把javascript中的一些常用的数组算法做一下总结，以方便大家面试笔试或者日常开发过程中用到。其中部分算法来自网络，这里做了下汇总
javascript实现查找数组中最大值方法汇总 方法一（使用递归函数）：vararr=[9,8,,,,,,,,6,2,1];varmax=arr[0];functionfindMax(i){if(i==arr.length)returnmax;if(maxarr[i])max=arr[i];findMax(i+1);}findMax(1);console.log(ma
JavaScript操作class和style样式代码详解 废话不多说了，直接给大家贴js代码了，具体代码如下所示：!doctypehtmlhtmlheadmetacharset="utf-"title无标题文档/titlestyle.fontSize{font-size:px;}.fontWeight{font-weight:bol
标签: Javascript 字符串拼接
本文链接地址:https://www.jiuchutong.com/biancheng/381655.html 转载请保留说明！上一篇：JavaScript实现标题栏文字轮播效果代码(javascript代码用什么来标记)
下一篇：JavaScript常用数组算法小结(javascript常见的数据类型)
