随笔 - 268  文章 - 0  评论 - 1028  阅读 - 160万

javascript通过arguments实现string.format函数

  在sitepoint上看到Andrew Tetlaw在08年写的文章arguments: A JavaScript Oddity,阅读之后,除了对arguments温故知新一遍以外,印象最深刻的还是Andrew的第一个函数实现的string.format功能。下面摘抄一下源码,深入分析一下他的设计实现思路:
  1. function format(string) {  
  2. var args = arguments;  
  3. var pattern = new RegExp("%([1-" + arguments.length + "])""g");  
  4. return String(string).replace(pattern, function(match, index) {  
  5. return args[index];  
  6. });  
  7. };  
通过format函数,下面的代码:
  1. 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的写法(大部分还是使用习惯在作怪吧?),好事楼猪稍微改动了一下源码:
  1. function format(string) {  
  2. var args = arguments;  
  3. var pattern = new RegExp("{([0-" + arguments.length + "])}""g");  
  4. return String(string).replace(pattern, function(match, index) {  
  5. var currentIndex = parseInt(index);  
  6. if (currentIndex + 1 > args.length || currentIndex < 0) {  
  7. throw new Error("参数索引出错");  
  8. }  
  9. return args[currentIndex + 1];  
  10. });  
  11. };  
  12. 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的佳作,豁然开朗,虽然反应迟钝后知后觉,依然感到无比振奋和欣慰。
posted on   JeffWong  阅读(2354)  评论(6编辑  收藏  举报
< 2010年8月 >
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 1 2 3 4
5 6 7 8 9 10 11

I know how to make it works and I want to know how it works.
点击右上角即可分享
微信分享提示