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

 更新时间:2011年09月22日 23:52:44   作者:  
加固javascript基础知识目的是为以后研究jQuery源码做好铺垫。
我最近查阅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

由此可见String的replace是相当的强大,不过本人正则表达式功力还不够,不知道还有什么别的特别的正则表达式会产生什么不同的结果。另外不知道谁有javascript里面String类replace原始写法,希望能贡献出来,我想好好研究下。

相关文章

  • 21个值得收藏的Javascript技巧

    21个值得收藏的Javascript技巧

    在本文中列出了21个值得收藏的Javascript技巧,在实际工作中,如果能适当运用,则大大提高工作效率
    2014-02-02
  • JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析

    JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析

    这篇文章主要介绍了JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作,结合实例形式分析了JavaScript针对HTML DOM 元素 (节点)的新增,编辑,删除相关操作技巧与使用注意事项,需要的朋友可以参考下
    2020-03-03
  • js+css3实现简单时钟特效

    js+css3实现简单时钟特效

    这篇文章主要为大家详细介绍了js+css3实现简单时钟特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JavaScript创建类/对象的几种方式概述及实例

    JavaScript创建类/对象的几种方式概述及实例

    JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的,下面与大家分享下创建类/对象的几种方式,感兴趣的朋友可以了解下哈
    2013-05-05
  • javascript中几个容易混淆的概念总结

    javascript中几个容易混淆的概念总结

    这篇文章主要介绍了javascript中几个容易混淆的概念总结,都是平时经常遇到的问题,这里推荐给大家,有需要的小伙伴参考下吧。
    2015-04-04
  • JS中数据结构与算法---排序算法(Sort Algorithm)实例详解

    JS中数据结构与算法---排序算法(Sort Algorithm)实例详解

    排序也称排序算法 (Sort Algorithm),排序是将 一组数据 , 依指定的顺序 进行 排列的过程 。这篇文章主要介绍了数据结构与算法---排序算法(Sort Algorithm),需要的朋友可以参考下
    2019-06-06
  • TypeScript中的类

    TypeScript中的类

    这篇文章主要介绍了TypeScript中的类,类这个概念基本是所有面向对象编程语言都具有一个概念,JavaScript中ES6 之前是没有类这个概念,下面文章围绕TypeScript类的相关资料展开内容,需要的朋友可以参考一下
    2021-12-12
  • javascript加减乘除的简单实例

    javascript加减乘除的简单实例

    下面小编就为大家带来一篇javascript加减乘除的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 用函数式编程技术编写优美的 JavaScript

    用函数式编程技术编写优美的 JavaScript

    用函数式编程技术编写优美的 JavaScript...
    2006-11-11
  • javascript中setAttribute兼容性用法分析

    javascript中setAttribute兼容性用法分析

    这篇文章主要介绍了javascript中setAttribute兼容性用法,结合实例形式分析了javascript使用setAttribute进行属性设置操作的相关使用技巧,需要的朋友可以参考下
    2016-12-12

最新评论