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>

另一篇文章，单独介绍replace的高级用法，传送门>>

运行结果：

<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;

})();