深入理解 JavaScript replace() 函数:当替换值为函数时

作者:青柠

时间:2026-10-24

浏览:295

本文详细解析 JavaScript 中 replace() 方法的进阶用法,重点介绍当第二个参数为函数时的执行机制。通过 camelize 函数示例,说明如何利用正则捕获组与回调函数配合,实现字符串格式转换,并解释替换函数各参数的具体含义。

代码如下:

 
JS replace() 函数进阶:替换值为函数的用法// 将 word-word 转换为 wordWord
function camelize(s){
return s.replace(/-(\w)/g, function(strMatch, p1){
return p1.toUpperCas();
}); 
} 

这里用到了文本替换函数 replace,其基本语法大家可能已经熟悉,现在介绍当第二个参数为函数时的情形。

今天我在群里发布这个函数时,有人很快指出上面的正则写错了“/-(\w)/g”,随后又立刻明白,他的疑惑在于那个“()”,其实这个括号是非常必要的:

(x)匹配 x,并将 x 保存到名为 $1, $2...$9 的变量中,这实际上是为匹配结果添加索引,方便后续调用。如果不加这个括号,程序就会出错:

代码如下:

好的,下面介绍函数参数的意义,为什么这个函数能够实现指定的功能呢?

ECMAScript v3 规定,replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下,每个匹配都调用该函数,它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串,可以有 0 个或多个这样的参数。接下来的参数是一个整数,声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。

看起来好像有点烦,举个例子:

代码如下:

camelize(www-rrr);

也就是调用一下,其实上面的 strMatch 值为 -r,就是与正则匹配的字符串(该函数的第一个参数是匹配模式的字符串),

上面的 p1 的值是 r,指的是紧接着 - 后面的 r(接下来的参数是与模式中的子表达式匹配的字符串),就是我们规定的索引——“(\w)”。

好了,我想之后这个函数要执行什么应该能看的很清楚了,呵呵,就到这里了,欢迎补充提议。

s.replace(/-([a-z])/ig, function(all, letter) { return letter.toUpperCase(); }); \w还包括了数字和_

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章