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

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

复制代码 代码如下:

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

时间: 2024-12-09 07:33:31

javascript下利用arguments实现string.format函数_javascript技巧的相关文章

javascript 利用arguments实现可变长参数_javascript技巧

javascript arguments解释,实现可变长参数. 在C#中,有可变长参数params[],但是在js中,如何实现这种可变参数呢? 一.可变长参数 arguments是非常好的解决方法,一直不知道javascript有这个东西. 先来看看应用场景,使用arguments传入任意个数的参数到js函数里的写法. function Test() { console.log(arguments[0]); console.log(arguments[1]); console.log(argum

为javascript添加String.Format方法_javascript技巧

复制代码 代码如下: String.format = function() { if( arguments.length == 0 ) { return null; } var str = arguments[0]; for(var i=1;i<arguments.length;i++) { var re = new RegExp('\\{' + (i-1) + '\\}','gm'); str = str.replace(re, arguments[i]); } return str; } 使

JavaScript 事件属性绑定带参数的函数_javascript技巧

例如不能采用这种调用方式:element.onclick = test();element.onclick = test(arg1,arg2);只能通过element.onclick = function(){ ... };或者element.onclick = test这种方式来实现,所以无法给函数传递参数.参考了大量的网上资料,解决这个问题的方式,以代码为例,如下所示: 复制代码 代码如下: function Handler() { }; Handler.prototype = { /* *

Javascript Function对象扩展之延时执行函数_javascript技巧

不就利用window对象的setTimeout方法吗?Bingo,一点没错!如果你在一个应用里面常常要"延时执行某某函数",那末基于DRY的原则,可以针对Function全局对象进行扩展,为函数增加一个延时方法如delay,这样会让你的代码更简洁有效. 扩站Function对象增加delay方法如下: 复制代码 代码如下: Function.prototype.delay=function(this1,timeout){ this1=this1||null; timeout=timeo

javascript中通过arguments参数伪装方法重载_javascript技巧

在很多面向对象的高级语言中,都有方法的重载.而javascript没有方法重载这个概念.但是我们可以通过arguments这个参数来伪装成函数的重载 在模拟之前我们先看一下代码: 复制代码 代码如下: //表面上没有声明形式参数的函数 function fun() { alert("示例代码"); } fun("小明", 100, true);//自己写了三个实际参数 通过结果我们看到,即使我们声明函数的时候没有定义形式参数,在调用方法的时候,我们也是可以写实际参数

javascript下查找父节点的简单方法_javascript技巧

<div>        <a href="#">标题</a>        <ul id="demo">            <li><a href="#" onclick="selectThisItem(this)">项目一</a></li>                <ul>                 

javascript下过滤数组重复值的代码_javascript技巧

<script language="javascript">    function getNoRepeat() {        return arguments[0].join('|').match(/(\b[^|]+\b)(?!.*|\1\b)/ig);    }    var tmpArr = [1, 'a', 'ab', 'abc', 'd', 1.2, 'a+b', 'd', 'e', 5, 'a', 1, 'h', 'c', 'ab'];    var ret

javascript下动态this与动态绑定实例代码_javascript技巧

那么函数就是被掰成两部分储存于对象,一是其函数名(键),一是函数体(值),那么函数中的this一般都指向函数所在的对象.但这是一般而已,在全局调用函数时,我们并没有看到调用者,或者这时就是window.不过,函数声明后,其实并没有绑定到任何对象,因此我们可以用call apply这些方法设置调用者. 一个简单的例子: [script] <script> window.name = "window"; var run = function() { alert("My

Javascript 获取滚动条位置等信息的函数_javascript技巧

其实这段代码在之前的 " 用 Javascript 实现锚点(Anchor)间平滑跳转" 一文已经介绍过了,但是由于这个需求并且经常用到,因此,本站专门发布此文介绍,方便查阅. 复制代码 代码如下: <script type="text/javascript"> // 说明:用 Javascript 获取滚动条位置等信息 // 来源 :ThickBox 2.1 function getScroll() { var t, l, w, h; if (docu