javascript笔记 String类replace函数的一些事

175 阅读 0 评论 116 点赞

我是靠谱客的博主怕孤单月饼，最近开发中收集的这篇文章主要介绍javascript笔记 String类replace函数的一些事，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

我最近查阅javascript资料，发现了一个函数：

复制代码代码如下:

 
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 

这种功能的函数，在shell或java都似曾见过，但是在javascript函数实现的方法很新颖。新颖的地方就是在：

复制代码代码如下:

 
return String(s).replace(pattern,function(word,index){ 
return args[index]; 
}); 

但是这里String类的replace的用法和我平时用的很不一样，我以前写过一个这样的replace的函数：

复制代码代码如下:

 
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时候，如果第二个参数是function我一般都只用到第一个参数，基本没有思考它的第二个，第三个或者更多的参数，现在看到有人使用了第二个参数，就很想探求下replace第二个参数使用到了function时候，里面参数到底有多少个，每个的含义到底如何？
下面是我改写了我自己写的替换函数：

复制代码代码如下:

 
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 

本来我以为，函数format里的function(word,index)，我认为应该是正则表达式所匹配字符串的索引（%1的索引为1，%2的索引为2，%3的索引为3），而我写的函数里面第二个参数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 + "@"; 
}); 
} 

函数format里面function(word,index)的参数有4个，而函数myReplaceFtn(s)里面function(word,index)的参数有3个。为什么会有这样的不同？我做了如下测试:

复制代码代码如下:

 
//以下程序在firefox里面运行 
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("标示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("标示newmyReplace" + i + "：" + arguments[i]); 
} 
return word = 'CJJK00'; 
}); 
} 

结果：
arguments.length:4
标示newformat0：%1
标示newformat1：1
标示newformat2：8
标示newformat3：And the %1 want to know whose %2 you %3
arguments.length:4
标示newformat0：%2
标示newformat1：2
标示newformat2：30
标示newformat3：And the %1 want to know whose %2 you %3
arguments.length:4
标示newformat0：%3
标示newformat1：3
标示newformat2：37
标示newformat3：And the %1 want to know whose %2 you %3
arguments.length:3
标示newmyReplace0：CJ90
标示newmyReplace1：0
标示newmyReplace2：CJ9080,CJ8976,CJ12919,CJ8765
arguments.length:3
标示newmyReplace0：CJ89
标示newmyReplace1：7
标示newmyReplace2：CJ9080,CJ8976,CJ12919,CJ8765
arguments.length:3
标示newmyReplace0：CJ12
标示newmyReplace1：14
标示newmyReplace2：CJ9080,CJ8976,CJ12919,CJ8765
arguments.length:3
标示newmyReplace0：CJ87
标示newmyReplace1：22
标示newmyReplace2：CJ9080,CJ8976,CJ12919,CJ8765
对于回调函数里的arguments值现在比较清晰了，arguments个数的不同应该和我们写的正则表达式有关系，不管怎样，第一个参数是匹配到的字符串，最后一个是原字符串，倒数第二个参数是匹配到的字符串的在原字符串索引的起始位，像format里的第二个参数index根据情况而定了，我自己写的newmyReplace里没有这个参数，format的index参数是%[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 