javascript笔记:String类replace函数的一些事
加固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原始写法,希望能贡献出来,我想好好研究下。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)