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 相关文章推荐
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
Ionic快速安装教程
Jun 03 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 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
B2K与车机的中波PK
2021/03/02 无线电
1.PHP简介
2006/10/09 PHP
php MYSQL 数据备份类
2009/06/19 PHP
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
Python中遍历列表的方法总结
2019/06/27 Python
学雷锋活动总结范文
2014/04/25 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
开除通知书范本
2015/04/25 职场文书
离婚案件上诉状
2015/05/23 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书