javascript下利用arguments实现string.format函数

下面摘抄一下源码，深入分析一下他的设计实现思路：


代码如下:

function format(string) {
var args = arguments;
var pattern = new RegExp("%([1-" + arguments.length + "])", "g");
return String(string).replace(pattern, function(match, index) {
return args[index];
});
};

通过format函数，下面的代码：


代码如下:

format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear");

就会返回："And the papers want to know whose shirt you wear" 。
果然有点像c#下string.format函数一样传参调用。
总体说来，好像真没什么技术含量。但是真的没有技术含量吗？楼猪大胆根据自己对javascript和arguments的浅薄认识和理解，再来剖析一下这段程序：
1、正则表达式
非常巧妙地new了一个以%开头匹配1到argument个数的一个正则pattern，这个正则是下面第2点字符串替换的重要前提准备；
2、string的Replace函数
replace函数的第二个参数是function，这点非常令人“意外”。通过定义，变量args实际上就是arguments，接着通过args[index]就能取到第index个参数，而且index>=1且index<arguments.length又能保证获取参数的正确。

函数如此短小精悍，和强大的功能形成巨大反差，令人拍案。
可能有许多像楼猪一样被c#惯坏的开发者，会迷恋c#的string.format的写法（大部分还是使用习惯在作怪吧？），好事楼猪稍微改动了一下源码：


代码如下:

function format(string) {
var args = arguments;
var pattern = new RegExp("{([0-" + arguments.length + "])}", "g");
return String(string).replace(pattern, function(match, index) {
var currentIndex = parseInt(index);
if (currentIndex + 1 > args.length || currentIndex < 0) {
throw new Error("参数索引出错");
}
return args[currentIndex + 1];
});
};
document.write(format("And the {0} want to know whose {1} you {2}", "papers", "shirt", "wear"));//大括号，索引从0开始...

这样看上去就可以像c#的编写风格一样调用format函数了。
最后查看此文的写作时间是在2008年，楼猪在08年的时候觉悟还算蛮高的，正自发努力学习javascript中，但是对arguments认识还很稚嫩，虽然已经知道可以在自定义事件中通过它来定义createFunction函数，用createFunction函数来构造无参数的function给事件使用，但是当时一直抑郁“只知其形，不得其实”。看完Andrew的佳作，豁然开朗，虽然反应迟钝后知后觉，依然感到无比振奋和欣慰。

你看一下Andrew Tetlaw的原文吧。其实下面已经有人指出format函数参数超出9以后，该函数就不起作用了，然后还给出了解决方法：

eric d. Hi, thanks for that brilliant article. Made a lot of things a lot clearer!
Note: new RegExp("%([1-" + arguments.length + "])", "g"); will fail passed 9 arguments (the regexp would be "%([1-10])" so it will only match %0 and %1).

I think an easy fix would be something like:
function format(string) { var args = arguments; var pattern = new RegExp("%([0-9]+)", "g"); return String(string).replace(pattern, function(match, index) { if (index == 0 || index >= args.length) throw "Invalid index in format string"; return args[index]; }); };
(Sorry for nitpicking, I understand it was only an example and brevety is the main objective, but its a great function to have)

Posted on: January 20th 2009, 12:01 am

赞 (0)

相关推荐

  • JavaScript实现格式化字符串函数String.format

    JavaScript实现格式化字符串函数String.format

    在js开发中,我们可能会遇到这样一个问题 当需要通过js动态插入html标签的时候 特别是当遇到大量的变量拼接.引号层层嵌套的情况,会出现转义字符问题,经常出错 我们来看个例子 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; c

  • js中的string.format函数代码

    源于C#中的string.Format() 复制代码 代码如下: String.prototype.format = function(args) { if (arguments.length>0) { var result = this; if (arguments.length == 1 && typeof (args) == "object") { for (var key in args) { var reg=new RegExp ("({&qu

  • javascript模拟实现C# String.format函数功能代码

    C# string.format这个功能用到的地方比较多, 所以就用js实现了一个简单的版本 : 复制代码 代码如下: String.format = function ()        {            var formatStr = arguments[0]; if ( typeof formatStr === 'string' )            {                var pattern,                    length = argume

  • 为javascript添加String.Format方法

    复制代码 代码如下: String.format = function() { if( arguments.length == 0 ) { return null; } var str = arguments[0]; for(var i=1;i<arguments.length;i++) { var re = new RegExp('\\{' + (i-1) + '\\}','gm'); str = str.replace(re, arguments[i]); } return str; } 使

  • javascript下string.format函数补充

    又重新阅读了一遍Andrew的原文,在原文下面的评论中,赫然发现也有人早提出参数个数的问题,同样懒惰的楼猪直接拷贝原文评论答复了一下,同时还发现说漏了很重要的一个注意点Array.prototype.slice.下面统一补充说明一下: 1.string.format的参数个数 在Andrew的原文中,已经有人指出: eric d. Hi, thanks for that brilliant article. Made a lot of things a lot clearer! Note: ne

  • javascript下利用arguments实现string.format函数

    下面摘抄一下源码,深入分析一下他的设计实现思路: 复制代码 代码如下: function format(string) { var args = arguments; var pattern = new RegExp("%([1-" + arguments.length + "])", "g"); return String(string).replace(pattern, function(match, index) { return args

  • 好用的C++ string Format“函数”介绍

    我这个人总是喜欢在写代码时追求极致,比如总是纠结于变量的命名,内存的消耗,执行的效率,接口的便捷性,代码的可扩展性...但很多时候需要在他们之间做取舍,这就导致我在编码时经常陷入僵局,唉...真是程序员的可悲,为此几年前我还专门将自己的CSDN签名改成了现在这样. 今天我又带来一个函数,相比网上其他版本效率更高(不存在额外拷贝问题),使用更便捷(无需预先分配缓存). 起初我设计的函数如下:相比网上其他的Format,特点是降低了内存消耗,也提升了使用的便捷性,但带来了执行效率的下降,而更严重的是

  • javascript下利用数组缓存正则表达式的实现方法

    javascript下利用数组缓存正则表达式的实现方法

    如果能用字面量创建正则就最好不过,显然有时我们不得不使用new RegExp()这种大消耗的创建方法,比如语法高亮与排版就大量用到正则表达式,要用到的patten越多,需要的时间就越长,火狐好像是12秒就发出警告,IE就直接假死.这时我们就需要利用组存大法要提高我们程序的性能了. 通常摆在我们眼前的如下两种选择来作为我们的容器,数组或对象.我这里选择前者,前者更轻量一点.下面我们就hasClass函数作性能改进. 原来的写法: 复制代码 代码如下: var hasClass = function

  • JavaScript下利用fso判断文件是否存在的代码

    复制代码 代码如下: function ReportFileStatus(filespec) { var fso, s = filespec; fso = new ActiveXObject("Scripting.FileSystemObject"); if (fso.FileExists(filespec)) s += " exists."; else s += " doesn't exist."; return(s); } 采用客户端的 Fi

  • javascript下利用for( in )语句 获得所有事件名称的代码

    events=[];for(o in document)if(/^on/.test(o))events.push(o)  这里输入代码内容  0 events=[' '];for(o in document)if(/^on/.test(o))events.push(o) result.innerHTML=events.sort().join(' ') [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript下的时间格式处理函数Date.prototype.format

    实例一: 一个全的js时间处理函数,虽然我没有仔细去研究里面的正则,但是我经过了测试,是非常好用的,你可以根据你自己的需求设置想要的时间格式的字符串输出,我应用到的格式为:MM/dd/yyyy hh:mm TT和yyyy-MM-dd HH:mm:ss. <span style="font-size:18px;">Date.prototype.format = function (mask) { var d = this; var zeroize = function (va

  • javascript中利用柯里化函数实现bind方法【推荐】

    • 柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: • 柯里化函数主要起到预处理的作用: • bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context; /** * bind方法实现原理1 * @param callback [Function] 回调函数 * @par

随机推荐