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的图片的切换(以数字的形式)
Feb 14 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
javascript实现获取服务器时间
May 19 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 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 ImageMagick windows下安装教程
2015/01/26 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
用Python实现换行符转换的脚本的教程
2015/04/16 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
200行python代码实现2048游戏
2019/07/17 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
机电专业大学生求职信
2013/10/04 职场文书
2014年党课学习材料
2014/05/11 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
python元组打包和解包过程详解
2021/08/02 Python
聊聊Python String型列表求最值的问题
2022/01/18 Python
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android