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 相关文章推荐
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
JS常用表单验证方法总结
May 22 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
详解Webpack4多页应用打包方案
Jul 16 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
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
初始Nodejs
2014/11/08 NodeJs
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
深入理解Node module模块
2018/03/26 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
js制作提示框插件
2020/12/24 Javascript
python制作花瓣网美女图片爬虫
2015/10/28 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
Django 拆分model和view的实现方法
2019/08/16 Python
python无序链表删除重复项的方法
2020/01/17 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
几款好用的python工具库(小结)
2020/10/20 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
大学四年职业生涯规划书范文
2014/01/02 职场文书
工程技术员岗位职责
2014/03/02 职场文书
班长演讲稿范文
2014/04/24 职场文书
品质标语大全
2014/06/21 职场文书
实名检举信范文
2015/03/02 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
导游词之吉林花园山
2019/10/17 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL