javascript下利用arguments實(shí)現(xiàn)string.format函數(shù)
更新時(shí)間:2010年08月24日 02:01:05 作者:
sitepoint上看到Andrew Tetlaw在08年寫的文章arguments: A JavaScript Oddity,閱讀之后,除了對arguments溫故知新一遍以外,印象最深刻的還是Andrew的第一個(gè)函數(shù)實(shí)現(xiàn)的string.format功能。
下面摘抄一下源碼,深入分析一下他的設(shè)計(jì)實(shí)現(xiàn)思路:
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函數(shù),下面的代碼:
format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear");
就會返回:"And the papers want to know whose shirt you wear" 。
果然有點(diǎn)像c#下string.format函數(shù)一樣傳參調(diào)用。
總體說來,好像真沒什么技術(shù)含量。但是真的沒有技術(shù)含量嗎?樓豬大膽根據(jù)自己對javascript和arguments的淺薄認(rèn)識和理解,再來剖析一下這段程序:
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)非常令人“意外”。通過定義,變量args實(shí)際上就是arguments,接著通過args[index]就能取到第index個(gè)參數(shù),而且index>=1且index<arguments.length又能保證獲取參數(shù)的正確。
函數(shù)如此短小精悍,和強(qiáng)大的功能形成巨大反差,令人拍案。
可能有許多像樓豬一樣被c#慣壞的開發(fā)者,會迷戀c#的string.format的寫法(大部分還是使用習(xí)慣在作怪吧?),好事樓豬稍微改動(dòng)了一下源碼:
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("參數(shù)索引出錯(cuò)");
}
return args[currentIndex + 1];
});
};
document.write(format("And the {0} want to know whose {1} you {2}", "papers", "shirt", "wear"));//大括號,索引從0開始...
這樣看上去就可以像c#的編寫風(fēng)格一樣調(diào)用format函數(shù)了。
最后查看此文的寫作時(shí)間是在2008年,樓豬在08年的時(shí)候覺悟還算蠻高的,正自發(fā)努力學(xué)習(xí)javascript中,但是對arguments認(rèn)識還很稚嫩,雖然已經(jīng)知道可以在自定義事件中通過它來定義createFunction函數(shù),用createFunction函數(shù)來構(gòu)造無參數(shù)的function給事件使用,但是當(dāng)時(shí)一直抑郁“只知其形,不得其實(shí)”??赐闍ndrew的佳作,豁然開朗,雖然反應(yīng)遲鈍后知后覺,依然感到無比振奮和欣慰。
你看一下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
復(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];
});
};
通過format函數(shù),下面的代碼:
復(fù)制代碼 代碼如下:
format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear");
就會返回:"And the papers want to know whose shirt you wear" 。
果然有點(diǎn)像c#下string.format函數(shù)一樣傳參調(diào)用。
總體說來,好像真沒什么技術(shù)含量。但是真的沒有技術(shù)含量嗎?樓豬大膽根據(jù)自己對javascript和arguments的淺薄認(rèn)識和理解,再來剖析一下這段程序:
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)非常令人“意外”。通過定義,變量args實(shí)際上就是arguments,接著通過args[index]就能取到第index個(gè)參數(shù),而且index>=1且index<arguments.length又能保證獲取參數(shù)的正確。
函數(shù)如此短小精悍,和強(qiáng)大的功能形成巨大反差,令人拍案。
可能有許多像樓豬一樣被c#慣壞的開發(fā)者,會迷戀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 > args.length || currentIndex < 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"));//大括號,索引從0開始...
這樣看上去就可以像c#的編寫風(fēng)格一樣調(diào)用format函數(shù)了。
最后查看此文的寫作時(shí)間是在2008年,樓豬在08年的時(shí)候覺悟還算蠻高的,正自發(fā)努力學(xué)習(xí)javascript中,但是對arguments認(rèn)識還很稚嫩,雖然已經(jīng)知道可以在自定義事件中通過它來定義createFunction函數(shù),用createFunction函數(shù)來構(gòu)造無參數(shù)的function給事件使用,但是當(dāng)時(shí)一直抑郁“只知其形,不得其實(shí)”??赐闍ndrew的佳作,豁然開朗,雖然反應(yīng)遲鈍后知后覺,依然感到無比振奮和欣慰。
你看一下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
您可能感興趣的文章:
- Java字符串格式化功能?String.format用法詳解
- Java String.format()的用法
- Java之String.format()方法案例講解
- 快速入門介紹Java中強(qiáng)大的String.format()
- Java中String.format的使用方法總結(jié)
- JavaScript實(shí)現(xiàn)格式化字符串函數(shù)String.format
- JAVA字符串格式化-String.format()的使用
- String.Format大全(C# Java)
- C#中string.format用法詳解
- javascript模擬實(shí)現(xiàn)C# String.format函數(shù)功能代碼
- js中的string.format函數(shù)代碼
- javascript下string.format函數(shù)補(bǔ)充
- asp.net String.format中大括號的加入方法
- 為javascript添加String.Format方法
相關(guān)文章
openlayers實(shí)現(xiàn)圖標(biāo)拖動(dòng)獲取坐標(biāo)
這篇文章主要為大家詳細(xì)介紹了openlayers實(shí)現(xiàn)圖標(biāo)拖動(dòng)獲取坐標(biāo),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09js實(shí)現(xiàn)當(dāng)鼠標(biāo)移到表格上時(shí)顯示這一格全部內(nèi)容的代碼
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)當(dāng)鼠標(biāo)移到表格上時(shí)顯示這一格全部內(nèi)容的代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06ASP中進(jìn)行HTML數(shù)據(jù)及JS數(shù)據(jù)編碼函數(shù)
在有些時(shí)候我們無法控制亂碼的出現(xiàn), 比如發(fā)送郵件的時(shí)候有些郵件顯示亂碼, 比如Ajax返回?cái)?shù)據(jù)總是亂碼. 怎么辦?2009-11-11如何使用JavaScript快速創(chuàng)建一個(gè)1到100的數(shù)組
平時(shí)寫代碼時(shí),我們會生產(chǎn)一些測試用的數(shù)組數(shù)據(jù),比如[1,100]的數(shù)組值,下面這篇文章主要給大家介紹了關(guān)于如何使用JavaScript快速創(chuàng)建一個(gè)1到100數(shù)組的相關(guān)資料,需要的朋友可以參考下2022-08-08hash特點(diǎn)、hashchange事件介紹及其常見應(yīng)用場景
淺析hash特點(diǎn)、hashchange事件介紹及其常見應(yīng)用場景(不同hash對應(yīng)不同事件處理、移動(dòng)端大圖展示狀態(tài)后退頁面問題、原生輕應(yīng)用頭部后退問題、移動(dòng)端自帶返回按鈕二次確認(rèn)問題),hashchange和popstate事件觸發(fā)條件2023-11-11