Javascript 字符串模板的简单实现(Javascript 字符串拼接)

推荐整理分享Javascript 字符串模板的简单实现(Javascript 字符串拼接)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:javascript 字符串转字节,javascript 字符串转字节,javascript 字符串长度,Javascript 字符串数组,javascript字符串转换为数字,javascript 字符串转字节,Javascript 字符串拼接,javascript字符串大小写转换,内容如对您有帮助，希望把文章链接给更多的朋友！

这是源于两年前，当我在做人生中第一个真正意义上的网站时遇到的一个问题

该网站采用前后端分离的方式，由后端的 REST 接口返回 JSON 数据，再由前端渲染到页面上。

同许多初学 Javascript 的菜鸟一样，起初，我也是采用拼接字符串的形式，将 JSON 数据嵌入 HTML 中。开始时代码量较少，暂时还可以接受。但当页面结构复杂起来后，其弱点开始变得无法忍受起来：

这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