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


Posted in Javascript onAugust 24, 2010

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

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

Javascript 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
javascript 清空form表单中某种元素的值
Dec 26 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 #Javascript
js null,undefined,字符串小结
Aug 21 #Javascript
javascript中的float运算精度实例分析
Aug 21 #Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 #Javascript
jquery插件之easing 动态菜单
Aug 21 #Javascript
url地址自动加#号问题说明
Aug 21 #Javascript
jquery中输入验证中一个不错的效果
Aug 21 #Javascript
You might like
中篇:安装及配置PHP
2006/12/13 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
基于python实现微信模板消息
2015/12/21 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
python基于opencv检测程序运行效率
2019/12/28 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
学习交流会主持词
2014/04/01 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
PHP策略模式写法
2021/04/01 PHP
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
Python 实现Mac 屏幕截图详解
2021/10/05 Python