String.prototype.replaceAll 替换字符串新方法

这篇文章由 DeathGhost 编辑,发布于

归类于 Javascript » 👋分享到微博 当前评论 0 条。

通常我们使用JavaScript处理字符串的时候会使用replace方法。String.prototype.replace(searchValue, replacement)指定字符串及所需替换为某一字符串,最后返回一个被替换过的字符串。那么,接下来看看关于replaceAll()方法。

原始方法

使用replace()方法后,我们常见的一个问题就是replace()不能替换所有指定的字符串。因为它仅替换第一次出现的子字符串。

'abbc'.replace('b', '_');
// 输出则是: "a_bc"
'😃😃😃😟😟😃😃'.replace('😃', '🤪')
// 输出:🤪😃😃😟😟😃😃

我们可以看到仅替换了第一个字符串。那么,对于开发人员通常会使用带有global(g)标志的正则表达式进行处理。

'😃😃😃😟😟😃😃'.replace(/😃/g, '🤪')
// 输出:"🤪🤪🤪😟😟🤪🤪"

对于前端开发人员而言,这是一种方法,但若复杂一点,很容出错,也比较麻烦。

另外一种方法就是使用stringObject.split(separator,howmany)结合arrayObject.join(separator)方法处理。

// 如:将中间的加号“+”替换为空。
's=a+b+c'.split('+').join(' ');
// 则输出:"s=a b c"
'😃😃😃😟😟😃😃'.split('😃').join('🤪')
"🤪🤪🤪😟😟🤪🤪"

看上去也还不错,但总感觉别扭,拆分后又合并连接起来。

replace VS replaceAll
replace VS replaceAll

接下来,我们了解下新方法。

String.prototype.replaceAll 新方法

新方法replaceAll()可以解决上面所述问题,字面意思我们也可以理解,并提供了一种简单的机制来执行全局子字符串替换。

'😃😃😃😟😟😃😃'.replaceAll('😃', '🤪')
// 输出:"🤪🤪🤪😟😟🤪🤪"
's=a+b+c'.replaceAll('+', ' ');
// => "s=a b c"

为了与现有API保持一致,其String.prototype.replaceAll(searchValue, replacement)处理方式与String.prototype.replace(searchValue, replacement)完全相同。

因此,String.prototype.replaceAll通过提供对全局字符串替换,而无需使用正则表达式或其他解决方法。

特殊替换方式

// 第一种
'abcde'.replaceAll('c', '$$')
// 第二种
'abcde'.replaceAll('c', '$&')

结果是:

// 第一种输出结果
"ab$de" 而非 "ab$$de"
// 第二种输出结果
"abcde" 而非 "ab$&de"

若要原样完整输出,则:

'abcde'.replaceAll('c', () => '$$')
'abcde'.replaceAll('c', () => '$&')

浏览器String.prototype.replaceAll支持情况

现代浏览器最新版均可支持,具体查看这里


JavaScript 替换 字符串 方法 replace() replaceAll() 全部 正则 前端开发 特殊替换

上一篇:

下一篇: