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 相关文章推荐
js倒计时抢购实例
Dec 20 Javascript
vuex实现简易计数器
Oct 27 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
Vue实现简易计算器
Feb 25 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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
第三节 定义一个类 [3]
2006/10/09 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
php显示页码分页类的封装
2017/06/08 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
Python中的作用域规则详解
2015/01/30 Python
分享Python文本生成二维码实例
2016/01/06 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
精彩的英文自荐信
2014/01/30 职场文书
教育学习自我评价
2014/02/03 职场文书
表演方阵解说词
2014/02/08 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
长江三峡导游词
2015/01/31 职场文书
慰问信格式规范
2015/03/23 职场文书
公司出纳岗位职责
2015/03/31 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技