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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
基于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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
node.js require() 源码解读
2015/12/13 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
班主任经验交流会主持词
2014/04/01 职场文书
人资专员岗位职责
2014/04/04 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
售后客服个人自我评价
2014/09/14 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
会议欢迎词范文
2015/01/27 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书