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 相关文章推荐
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
详解AngularJS 模块化
Jun 14 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
基于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更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
培养自己的php编码规范
2015/09/28 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
JS中的作用域链
2017/03/01 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
webpack分离css单独打包的方法
2018/06/12 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
python Django模板的使用方法
2016/01/14 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Python调用飞书发送消息的示例
2020/11/10 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
linux下进程间通信的方式
2013/01/23 面试题
学校法制宣传月活动总结
2014/07/03 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
买卖合同协议书范本
2014/10/18 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
离婚协议书范文2015
2015/01/26 职场文书
《海上日出》教学反思
2016/02/23 职场文书
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python
KVM基础命令详解
2022/04/30 Servers