1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 18:32:22 +00:00

docs(string): add replaceAll()

This commit is contained in:
ruanyf 2020-10-25 12:33:16 +08:00
parent d1f96feee0
commit 356b0db1b0

View File

@ -329,3 +329,88 @@ s.trimEnd() // " abc"
`matchAll()`方法返回一个正则表达式在当前字符串的所有匹配,详见《正则的扩展》的一章。
## 实例方法replaceAll()
历史上,字符串的实例方法`replace()`只能替换第一个匹配。
```javascript
'aabbcc'.replace('b', '_')
// 'aa_bcc'
```
上面例子中,`replace()`只将第一个`b`替换成了下划线。
如果要替换所有的匹配,不得不使用正则表达式的`g`修饰符。
```javascript
'aabbcc'.replace(/b/g, '_')
// 'aa__cc'
```
正则表达式毕竟不是那么方便和直观,[ES2021](https://github.com/tc39/proposal-string-replaceall) 引入了`replaceAll()`方法,可以一次性替换所有匹配。
```javascript
'aabbcc'.replaceAll('b', '_')
// 'aa__cc'
```
它的用法与`replace()`相同,返回一个新字符串,不会改变原字符串。
```javascript
String.prototype.replaceAll(searchValue, replacement)
```
上面代码中,`searchValue`是搜索模式,可以是一个字符串,也可以是一个全局的正则表达式(带有`g`修饰符)。
如果`searchValue`是一个不带有`g`修饰符的正则表达式,`replaceAll()`会报错。这一点跟`replace()`不同。
```javascript
// 不报错
'aabbcc'.replace(/b/, '_')
// 报错
'aabbcc'.replaceAll(/b/, '_')
```
上面例子中,`/b/`不带有`g`修饰符,会导致`replaceAll()`报错。
`replaceAll()`的第二个参数`replacement`是一个字符串,表示替换的文本,其中可以使用一些特殊字符串。
- `$&`:匹配的子字符串。
- `` `$` ``:匹配结果前面的文本。
- `$'`:匹配结果后面的文本。
- `$n`:匹配成功的第`n`组内容,`n`是从1开始的自然数。
- `$$`:指代美元符号`$`
```javascript
'abc'.replaceAll('b', '$$')
// 'a$c'
```
上面例子中,`$$`表示替换的文本是单个美元符号`$`
`replaceAll()`的第二个参数`replacement`除了为字符串,也可以是一个函数,该函数的返回值将替换掉第一个参数`searchValue`匹配的文本。
```javascript
'aabbcc'.replaceAll('b', () => '_')
// 'aa__cc'
```
上面例子中,`replaceAll()`的第二个参数是一个函数,该函数的返回值会替换掉所有`b`的匹配。
这个替换函数可以接受多个参数。第一个参数是捕捉到的匹配内容,第二个参数捕捉到是组匹配(有多少个组匹配,就有多少个对应的参数)。此外,最后还可以添加两个参数,倒数第二个参数是捕捉到的内容在整个字符串中的位置,最后一个参数是原字符串。
```javascript
const str = '123abc456';
const regex = /(\d+)([a-z]+)(\d+)/g;
function replacer(match, p1, p2, p3, offset, string) {
return [p1, p2, p3].join(' - ');
}
str.replaceAll(regex, replacer)
// 123 - abc - 456
```
上面例子中,正则表达式有三个组匹配,所以`replacer()`函数的第一个参数`match`是捕捉到的匹配内容(即字符串`123abc456`),后面三个参数`p1``p2``p3`则依次为三个组匹配。