javascript中replace( )方法的使用


Posted in Javascript onApril 24, 2015

最近在浏览一些阿里的前端面试题,其中有一题涉及了javascript中replace( )方法的使用,下面是原题:

“说出以下函数的作用是?空白区域应该填写什么?”

// define 
 (function (window) { 
   function fn(str) { 
     this.str = str; 
   } 
   fn.prototype.format = function () { 
     var arg = ______; 
     return this.str.replace(_______, function (a, b) { 
       return arg[b] || ''; 
     }); 
   } 
   window.fn = fn; 
 })(window); 
 // use 
 (function(){ 
   var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
   console.log( t.format('http://www.alibaba.com', 'Alibaba', 'Welcome') ); 
 })();

以下是分析过程(感觉还是弄个编号,个人觉得比较有条理一些)

1、因为本题也涉及了到其它的知识点,如匿名函数、原型等知识点,但不是本次讨论的重点。

2、根据题面,我们知道,该题的源码类似于写一个模板引擎。将模板里的‘{1}'之类的占位符替换成传给它的参数。所以arg应该就是arguments。但是!!!由于arg不是数组,而是一个类数组对象(不懂的可自行百度(u_u)),所以我们需要进行一些转换,

var arg=Array.prototype.slice.call(arguments,0);

3、等号右边也就是第一空的答案了。说了这么多,那么接下来第二空就是我们要讨论的重点了~~~~~~我们都知道第二空是要通过正则找出占位符,并根据占位符内的数字将其替换成arg数组内的字符串,说实话replace方法的第二个参数为函数的情况很少遇到,一般我们遇到都是这样的,看下面的代码:

 var pattern=/8(.*)8/;

 var str='This is a 8baidu8';

 document.write(str.replace(pattern,'<strong>$1</strong>'));

4、由于replace第二个参数是函数的情况比较少,那么我们就来重点谈谈第二个参数为函数的情形。

首先这是replace函数的语法:stringobject.replace(regexp/substr,replacement)

其中regexp/substr必需。规定字符串或要替换的模式的regexp对象。(请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 regexp 对象。) replacement必需。一个字符串值。规定了替换文本或生成替换文本的函数。最后返回一个新的字符串,是用replacement替换了regexp的第一次匹配或所有匹配之后得到的。

5、ECMAScript规定,replace()方法的参数replacement可以是函数而不是字符串。在这种情况下,每个匹配都调用该函数,它返回的字符串将替换文本使用。第一个参数表示匹配到的字符,第二个参数表示匹配到的字符最小索引位置(RegExp.index),第三个参数表示被匹配的字符串(RegExp.input)。

6、所以第二空可以这样写:/\{(\d+)\}/g,放在语句中完整为:

return this.str.replace(/\{(\d+)\}/g, function (a, b) {  

    return arg[b] || '';  

});

执行第一次匹配时,{0}被替代为arg[0]
执行第一次匹配时,{1}被替代为arg[1]
执行第一次匹配时,{2}被替代为arg[2]

7、以上就是js字符串方法replace()的第二个参数为函数讲解(有不完善的地方,自行补充),当然这道面试题也解决了~~~~~

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
jqTransform美化表单
Oct 10 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
js实现图片懒加载效果
Jul 17 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 #Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 #Javascript
原生js制作简单的数字键盘
Apr 24 #Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 #Javascript
Node.js实现Excel转JSON
Apr 24 #Javascript
js中for in语句的用法讲解
Apr 24 #Javascript
JScript中的条件注释详解
Apr 24 #Javascript
You might like
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
测试php函数的方法
2013/11/13 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
JS 自动安装exe程序
2008/11/30 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
Python3安装Pillow与PIL的方法
2019/04/03 Python
Python imread、newaxis用法详解
2019/11/04 Python
python默认参数调用方法解析
2020/02/09 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
django 多数据库及分库实现方式
2020/04/01 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
博士毕业生自我鉴定范文
2014/04/13 职场文书
中职生求职信
2014/07/01 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书