本文深入解析JavaScript中String.replace()方法在第二个参数为函数时的行为机制。通过阿里前端面试题案例，演示如何利用正则捕获组与回调函数实现模板引擎式的动态字符串替换，详细讲解匹配参数、索引及输入字符串的传递规则。
JavaScript replace()方法函数参数解析
近期在查阅阿里前端面试题时，遇到一道涉及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对象。然而，arguments并非真正的数组，而是一个类数组对象（若不清楚可查阅相关资料），故需对其进行转换处理，
具体实现代码如下：
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>'));replace回调函数的参数机制
4、鉴于replace第二个参数为函数的场景相对少见，此处重点剖析该情形下的工作机制。
首先回顾replace函数的基本语法：stringobject.replace(regexp/substr,replacement)
其中regexp/substr为必需参数，指定要替换的模式（字符串或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、以上即为JavaScript字符串方法replace()中第二个参数为函数的详细讲解（如有不完善之处欢迎补充）。至此，该面试题已解答完毕。
以上就是本文的全部内容，希望对大家有帮助。