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的direction图片渐变动画效果
May 24 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
react路由配置方式详解
Aug 07 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
javascript实现放大镜功能
Dec 09 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中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
浅谈Javascript实现继承的方法
2015/07/06 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
python算法学习之基数排序实例
2013/12/18 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
积极分子思想汇报
2014/01/04 职场文书
信息技术课后反思
2014/04/27 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
横店影视城导游词
2015/02/06 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
商标侵权律师函
2015/05/27 职场文书
2016年教师节感言
2015/12/09 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android