加固javascript基礎(chǔ)知識目的是為以后研究jQuery源碼做好鋪墊。
我最近查閱javascript資料,發(fā)現(xiàn)了一個函數(shù):
function format(s){ var args = arguments; var pattern = new RegExp("%([1-" + arguments.length + "])","g"); return String(s).replace(pattern,function(word,index){ return args[index]; });}// test window.onload = alert(format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear"));//And the papers want to know whose shirt you wear
這種功能的函數(shù),在shell或java都似曾見過,但是在javascript函數(shù)實(shí)現(xiàn)的方法很新穎。新穎的地方就是在:
return String(s).replace(pattern,function(word,index){ return args[index]; });
但是這里String類的replace的用法和我平時用的很不一樣,我以前寫過一個這樣的replace的函數(shù):
function myReplace(s){ return String(s).replace(/CJ[0-9]{2}/g,function(word){ return word = 'CJJK00'; });}//window.onload = alert(myReplace('CJ9080,CJ8976,CJ12919,CJ8765'));//CJJK0080,CJJK0076,CJJK00919,CJJK0065
我在使用replace時候,如果第二個參數(shù)是function我一般都只用到第一個參數(shù),基本沒有思考它的第二個,第三個或者更多的參數(shù),現(xiàn)在看到有人使用了第二個參數(shù),就很想探求下replace第二個參數(shù)使用到了function時候,里面參數(shù)到底有多少個,每個的含義到底如何?
下面是我改寫了我自己寫的替換函數(shù):
function myReplaceFtn(s){ return String(s).replace(/CJ[0-9]{2}/g,function(word,index){ return word = 'CJJK00@' + index + "@"; });}//window.onload = alert(myReplaceFtn('CJ9080,CJ8976,CJ12919,CJ8765'));//CJJK00@0@80,CJJK00@7@76,CJJK00@14@919,CJJK00@22@65
本來我以為,函數(shù)format里的function(word,index),我認(rèn)為應(yīng)該是正則表達(dá)式所匹配字符串的索引(%1的索引為1,%2的索引為2,%3的索引為3),而我寫的函數(shù)里面第二個參數(shù)index不是被匹配到字符串的索引,而是被匹配到的字符在原字符串的位置。下面我做了這樣的測試:
function format(s){ var args = arguments; var pattern = new RegExp("%([1-" + arguments.length + "])","g"); return String(s).replace(pattern,function(word,index){ alert("arguments.length:" + arguments.length);//4 return args[index]; });}function myReplaceFtn(s){ return String(s).replace(/CJ[0-9]{2}/g,function(word,index){ alert("arguments.length:" + arguments.length);//3 return word = 'CJJK00@' + index + "@"; });}
函數(shù)format里面function(word,index)的參數(shù)有4個,而函數(shù)myReplaceFtn(s)里面function(word,index)的參數(shù)有3個。為什么會有這樣的不同?我做了如下測試:
//以下程序在firefox里面運(yùn)行function newformat(s){ var args = arguments; var pattern = new RegExp("%([1-" + arguments.length + "])","g"); return String(s).replace(pattern,function(word,index){ console.log("arguments.length:" + arguments.length); for (var i = 0,j = arguments.length;i<j;i++) { console.log("標(biāo)示newformat" + i + ":" + arguments[i]); } return args[index]; });}function newmyReplace(s){ return String(s).replace(/CJ[0-9]{2}/g,function(word){ console.log("arguments.length:" + arguments.length); for (var i = 0,j = arguments.length;i<j;i++) { console.log("標(biāo)示newmyReplace" + i + ":" + arguments[i]); } return word = 'CJJK00'; });}結(jié)果:arguments.length:4標(biāo)示newformat0:%1標(biāo)示newformat1:1標(biāo)示newformat2:8標(biāo)示newformat3:And the %1 want to know whose %2 you %3arguments.length:4標(biāo)示newformat0:%2標(biāo)示newformat1:2標(biāo)示newformat2:30標(biāo)示newformat3:And the %1 want to know whose %2 you %3arguments.length:4標(biāo)示newformat0:%3標(biāo)示newformat1:3標(biāo)示newformat2:37標(biāo)示newformat3:And the %1 want to know whose %2 you %3arguments.length:3標(biāo)示newmyReplace0:CJ90標(biāo)示newmyReplace1:0標(biāo)示newmyReplace2:CJ9080,CJ8976,CJ12919,CJ8765arguments.length:3標(biāo)示newmyReplace0:CJ89標(biāo)示newmyReplace1:7標(biāo)示newmyReplace2:CJ9080,CJ8976,CJ12919,CJ8765arguments.length:3標(biāo)示newmyReplace0:CJ12標(biāo)示newmyReplace1:14標(biāo)示newmyReplace2:CJ9080,CJ8976,CJ12919,CJ8765arguments.length:3標(biāo)示newmyReplace0:CJ87標(biāo)示newmyReplace1:22標(biāo)示newmyReplace2:CJ9080,CJ8976,CJ12919,CJ8765
對于回調(diào)函數(shù)里的arguments值現(xiàn)在比較清晰了,arguments個數(shù)的不同應(yīng)該和我們寫的正則表達(dá)式有關(guān)系,不管怎樣,第一個參數(shù)是匹配到的字符串,最后一個是原字符串,倒數(shù)第二個參數(shù)是匹配到的字符串的在原字符串索引的起始位,像format里的第二個參數(shù)index根據(jù)情況而定了,我自己寫的newmyReplace里沒有這個參數(shù),format的index參數(shù)是%[1-4],里面的1-4,不過還是寫個方法確定下:
function charFormat(s){ var pattern = new RegExp("%([a-d])","g"); return String(s).replace(pattern,function(word,index){ switch(index) { case 'a': return 'thisisA'; case 'b': return 'thisisB'; case 'c': return 'thisisC'; case 'd': return 'thisisD'; default: return 'thisisNULL'; } });}window.onload = console.log(charFormat("And the %a want to know whose %d you %b", "papers", "shirt", "wear"));
//And the thisisA want to know whose thisisD you thisisB
由此可見String的replace是相當(dāng)?shù)膹?qiáng)大,不過本人正則表達(dá)式功力還不夠,不知道還有什么別的特別的正則表達(dá)式會產(chǎn)生什么不同的結(jié)果。另外不知道誰有javascript里面String類replace原始寫法,希望能貢獻(xiàn)出來,我想好好研究下。