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使用查询手册
Mar 07 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
JS class语法糖的深入剖析
Jul 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 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
超清晰的document对象详解
2007/02/27 Javascript
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
json的使用小结
2016/06/08 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
python使用生成器实现可迭代对象
2018/03/20 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Python urllib.request对象案例解析
2020/05/11 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
党支部书记先进事迹
2014/01/17 职场文书
大学活动总结模板
2014/07/10 职场文书
买房子个人收入证明
2014/10/12 职场文书
诚信承诺书
2015/01/19 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
python 模块重载的五种方法
2021/04/24 Python
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python