热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

加固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{
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{
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原始写法,希望能贡献出来,我想好好研究下。
推荐阅读
  • 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 本文介绍了获取关联数组键的列表的方法,即使用Object.keys()函数。同时还提到了该方法在不同浏览器的支持情况,并附上了一个代码片段供读者参考。 ... [详细]
  • 本文讨论了编写可保护的代码的重要性,包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法,如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道,如不规范的命名、重复代码、过长的函数和参数列表等。最后,介绍了如何处理数据泥团和进行函数重构,以提高代码质量和可维护性。 ... [详细]
  • 分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
  • macOS Big Sur全新设计大版本更新,10+个值得关注的新功能
    本文介绍了Apple发布的新一代操作系统macOS Big Sur,该系统采用全新的界面设计,包括图标、应用界面、程序坞和菜单栏等方面的变化。新系统还增加了通知中心、桌面小组件、强化的Safari浏览器以及隐私保护等多项功能。文章指出,macOS Big Sur的设计与iPadOS越来越接近,结合了去年iPadOS对鼠标的完善等功能。 ... [详细]
  • JavaScript简介及语言特点
    本文介绍了JavaScript的起源和发展历程,以及其在前端验证和服务器端开发中的应用。同时,还介绍了ECMAScript标准、DOM对象和BOM对象的作用及特点。最后,对JavaScript作为解释型语言和编译型语言的区别进行了说明。 ... [详细]
  • 本文介绍了网页播放视频的三种实现方式,分别是使用html5的video标签、使用flash来播放以及使用object标签。其中,推荐使用html5的video标签来简单播放视频,但有些老的浏览器不支持html5。另外,还可以使用flash来播放视频,需要使用object标签。 ... [详细]
  • Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施
    本文详细解析了Apache Shiro 身份验证绕过漏洞 (CVE202011989) 的原理和影响,并提供了相应的防范措施。Apache Shiro 是一个强大且易用的Java安全框架,常用于执行身份验证、授权、密码和会话管理。在Apache Shiro 1.5.3之前的版本中,与Spring控制器一起使用时,存在特制请求可能导致身份验证绕过的漏洞。本文还介绍了该漏洞的具体细节,并给出了防范该漏洞的建议措施。 ... [详细]
  • 场景1.IE,Firefox浏览器访问不了网站,谷歌浏览器可以,返回错误码DNS_PROBE_POSSIBLE.2.pingwww.qq.com可以ping通,ping局域 ... [详细]
  • python+selenium十:基于原生selenium的二次封装fromseleniumimportwebdriverfromselenium.webdriv ... [详细]
  • CSS|网格-行-结束属性原文:https://www.gee ... [详细]
  • Mitchell Baker:担任 Mozilla CEO 是我最艰难的职业
    作者|MitchellBaker责编|弯月出品|CSDN(ID:CSDNnews)如果想改变互联网,我们就不能故步自封。我加 ... [详细]
  • 对Firefoxios源码的精简Firefox的依赖使用carthage来进行管理,国内的网络是在过于坑爹,相关的依赖包总是无法下载下来,花了两天时间,手动将Firefox所依赖的库导入 ... [详细]
  • css元素可拖动,如何使用CSS禁止元素拖拽?
    一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]
author-avatar
gunnerliang_851
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有