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 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
javascript中的作用域scope介绍
Dec 28 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
原生js实现吸顶效果
Mar 13 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
Python基础入门之seed()方法的使用
2015/05/15 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
详解Python sys.argv使用方法
2019/05/10 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
工作期间打牌检讨书范文
2014/11/20 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书