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插件制作 表单验证实现代码
Aug 17 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
Yii学习总结之安装配置
2015/02/22 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
ES6 十大特性简介
2020/12/09 Javascript
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python单元测试简单示例
2018/07/03 Python
python对视频画框标记后保存的方法
2018/12/07 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
Python常用类型转换实现代码实例
2020/07/28 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
如何执行一个shell程序
2012/11/23 面试题
副厂长岗位职责
2014/02/02 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
运动会广播稿200字
2014/10/18 职场文书
2014年度个人总结范文
2015/03/09 职场文书
勇敢的心观后感
2015/06/09 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle