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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
JQuery 入门实例1
Jun 25 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
详解javascript遍历方式
Nov 11 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
JS 数组随机洗牌的实例代码
Sep 12 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
Python常用模块用法分析
2014/09/08 Python
Python中的字典遍历备忘
2015/01/17 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
详解Django中异步任务之django-celery
2020/11/05 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
中学生家长评语大全
2014/04/16 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
诚实守信演讲稿
2014/09/01 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫