Javascript字符串模板简单实现(一)

前言：前端现在的js框架层出不穷，而dom渲染的不同方式也是我们在实际开发中经常遇到的。模板渲染的方式，让我们从开发到维护dom变得简单轻松起来。 前端模板引擎JsRender ，jq的插件jQuery.tmpl ,ng中的mvvm模式……。

随便写写，纯属娱乐。

字符串模板：'<a href="{0}">{1}-{2}</a>'

需要替换的变量：'http://www.baidu.com','百度','中国'

我们现在需要达到的效果就是，将这三个字符串，分别一 一对应字符串模板中的{0},{1},{2}进行替换，达到的效果为：

<a href="http://www.baidu.com">百度-中国</a>

思路：将{} 替换为变量，首先我们想到的是什么？是的，正则，使用正则匹配{}，把{}检索出来并替换成对应的字符串。

---

先上代码

<div id="container"></div><script type="text/javascript">    (function(window){        function fun(str){            this.str = str;        }        fun.prototype.format = function(){            var arg = arguments;            return this.str.replace(/\{(\w+)\}/g, function(a,b){                return arg[b] || '';            });        }        window.fun = fun;    })(this);    (function(){        var tpl = '<a href="{0}">{1}-{2}</a>';        var result = new fun(tpl).format('http://www.baidu.com','百度','中国');        document.querySelector('div#container').innerHTML = result;    })();</script>

运行结果：

<div id="container"><a href="http://www.baidu.com">百度-中国</a></div>

代码解释：

(function(window){    //构造函数    function fun(str){        this.str = str;    }    //函数扩展方法    fun.prototype.format = function(){        //获取函数参数        var arg = arguments;        /*            replace的高级用法：            第一个参数，是正则匹配类似 {a} 的字符串            第二个参数，取函数的返回值，这里的a代表正则表达式所匹配的正则模式，即{0}，{1}，{2}，                        b代表着正则模式中的表达式即 0，1 ,2                        function(a,b){                            //return                          }         */        return this.str.replace(/\{(\w+)\}/g, function(a,b){            return arg[b] || '';        });    }    //全局声明fun    window.fun = fun;})(window);(function(){    //字符串模板    var tpl = '<a href="{0}">{1}-{2}</a>';    //执行函数，format内部的是3个字符串将一一对应tpl中相应的字符串模板    var result = new fun(tpl).format('http://www.baidu.com','百度','中国');    //将结果展示在div中    document.querySelector('div#container').innerHTML = result;})();