代码改变世界

给 Javascript 的 string 对象扩展一个 format 方法

2012-04-19 15:41  音乐让我说  阅读(377)  评论(0)  编辑  收藏  举报

代码如下：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>给 Javascript 的 string 对象扩展一个 format 方法</title>
    <script type="text/javascript">
        String.prototype.format = function (args)
        {
            var result = this;
            if (arguments.length > 0)
            {
                if (arguments.length == 1 && typeof (args) == "object")
                {
                    for (var key in args)
                    {
                        if (args[key] != undefined)
                        {
                            var reg = new RegExp("({" + key + "})", "g");
                            result = result.replace(reg, args[key]);
                        }
                    }
                }
                else
                {
                    for (var i = 0; i < arguments.length; i++)
                    {
                        if (arguments[i] != undefined)
                        {
                            var reg = new RegExp("({[" + i + "]})", "g");
                            result = result.replace(reg, arguments[i]);
                        }
                    }
                }
            }
            return result;
        }
        function InvokeDemo1()
        {
            var template = "我是{0}，今年{1}了";
            var result = template.format("bruce", 24);
            alert(result);
        }
        function InvokeDemo2()
        {
            var template = "我是{name}，今年{age}了";
            var result = template.format({ name: "bruce", age: 24 });
            alert(result);
        }
        function InvokeDemo3()
        {
            var template = "我是{name}，今年{age}了，爱好{hobby}";
            var result = template.format({ age: 24, name: "bruce" });  // 注意，这里故意少了一个参数
            alert(result);
        }
        function InvokeDemo4()
        {
            var optionTemplate = "<option value=\"{0}\" {1}>{2}</option>";
            var result = optionTemplate.format(2012, "selected=\"selected\"", 2012);
            alert(result);
        }
    </script>
</head>
<body>
    <div>
        调用方式1：用<br />
        var template = "我是{0}，今年{1}了";<br />
        var result = template.format("bruce", 24);<br />
        <input type="button" value="调用" onclick="InvokeDemo1();" />
    </div>
    <br /><br />
    <div>
        调用方式2：用<br />
        var template = "我是{name}，今年{age}了";<br />
        var result = template.format({ name: "bruce", age: 24 });<br />
        <input type="button" value="调用" onclick="InvokeDemo2();" />
    </div>
    <br /><br />
    <div>
        调用方式3：用<br />
        var template = "我是{name}，今年{age}了，爱好{hobby}";<br />
        var result = template.format({ age: 24, name: "bruce" }); //注意，这里故意少了一个参数 <br />
        <input type="button" value="调用" onclick="InvokeDemo3();" />
    </div>
    <br /><br />
    <div>
        调用方式4：<br />
        <input type="button" value="调用" onclick="InvokeDemo4();" />
    </div>
</body>
</html>

 

您可能还会喜欢：一个简单的 JavaScript 模板引擎

 

谢谢浏览！