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中的ready函数冲突的解决方法
May 17 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
javascript三种代码注释方法
Jun 02 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 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
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
简单介绍Python中的floor()方法
2015/05/15 Python
python读取LMDB中图像的方法
2018/07/02 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python进行TCP端口扫描的实现
2018/12/21 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
Django如何使用redis作为缓存
2020/05/21 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
中科软测试工程师面试题
2012/06/16 面试题
学生处主任岗位职责
2013/12/01 职场文书
行政前台岗位职责
2013/12/04 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
奥利奥广告词
2014/03/20 职场文书
活动总结报告范文
2014/05/04 职场文书
2015年团支部工作总结
2015/04/03 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书