快捷導(dǎo)航

javascript下利用arguments實(shí)現(xiàn)string.format函數(shù)

更新時(shí)間：2010年08月24日 02:01:05 作者：

sitepoint上看到Andrew Tetlaw在08年寫的文章arguments: A JavaScript Oddity，閱讀之后，除了對(duì)arguments溫故知新一遍以外，印象最深刻的還是Andrew的第一個(gè)函數(shù)實(shí)現(xiàn)的string.format功能。

下面摘抄一下源碼，深入分析一下他的設(shè)計(jì)實(shí)現(xiàn)思路：

復(fù)制代碼代碼如下:

 
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]; 
}); 
}; 

通過(guò)format函數(shù)，下面的代碼：

復(fù)制代碼代碼如下:

format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear");

就會(huì)返回："And the papers want to know whose shirt you wear" 。
果然有點(diǎn)像c#下string.format函數(shù)一樣傳參調(diào)用。
總體說(shuō)來(lái)，好像真沒(méi)什么技術(shù)含量。但是真的沒(méi)有技術(shù)含量嗎？樓豬大膽根據(jù)自己對(duì)javascript和arguments的淺薄認(rèn)識(shí)和理解，再來(lái)剖析一下這段程序：
1、正則表達(dá)式
非常巧妙地new了一個(gè)以%開頭匹配1到argument個(gè)數(shù)的一個(gè)正則pattern，這個(gè)正則是下面第2點(diǎn)字符串替換的重要前提準(zhǔn)備；
2、string的Replace函數(shù)
replace函數(shù)的第二個(gè)參數(shù)是function，這點(diǎn)非常令人“意外”。通過(guò)定義，變量args實(shí)際上就是arguments，接著通過(guò)args[index]就能取到第index個(gè)參數(shù)，而且index>=1且index<arguments.length又能保證獲取參數(shù)的正確。

函數(shù)如此短小精悍，和強(qiáng)大的功能形成巨大反差，令人拍案。
可能有許多像樓豬一樣被c#慣壞的開發(fā)者，會(huì)迷戀c#的string.format的寫法（大部分還是使用習(xí)慣在作怪吧？），好事樓豬稍微改動(dòng)了一下源碼：

復(fù)制代碼代碼如下:

 
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 &gt; args.length || currentIndex &lt; 0) { 
throw new Error("參數(shù)索引出錯(cuò)"); 
} 
return args[currentIndex + 1]; 
}); 
}; 
document.write(format("And the {0} want to know whose {1} you {2}", "papers", "shirt", "wear"));//大括號(hào)，索引從0開始... 

這樣看上去就可以像c#的編寫風(fēng)格一樣調(diào)用format函數(shù)了。
最后查看此文的寫作時(shí)間是在2008年，樓豬在08年的時(shí)候覺(jué)悟還算蠻高的，正自發(fā)努力學(xué)習(xí)javascript中，但是對(duì)arguments認(rèn)識(shí)還很稚嫩，雖然已經(jīng)知道可以在自定義事件中通過(guò)它來(lái)定義createFunction函數(shù)，用createFunction函數(shù)來(lái)構(gòu)造無(wú)參數(shù)的function給事件使用，但是當(dāng)時(shí)一直抑郁“只知其形，不得其實(shí)”?？赐闍ndrew的佳作，豁然開朗，雖然反應(yīng)遲鈍后知后覺(jué)，依然感到無(wú)比振奮和欣慰。

你看一下Andrew Tetlaw的原文吧。其實(shí)下面已經(jīng)有人指出format函數(shù)參數(shù)超出9以后，該函數(shù)就不起作用了，然后還給出了解決方法：

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

您可能感興趣的文章: