👻 DeathGhost

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支持情况

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

在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

当前共获取0条评论。

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕