一文搞懂String的replace用法

String的replace方法的使用

大部分语言的都有字符串类型，字符串类型基本都有replace方法，今天就来说说javascript的replace方法

  const str = 'abcdefjabcd'
  const newStr = str.replace('a', 'p')
  console.log(newStr) // pbcdefjabcd

今天的分享就到这里，恭喜你已经学会了javascript的字符串的replace的使用了...

有的童鞋可能会问了，我是要替换所有的a呀，你这也没有被替换掉啊。哈哈，没全替换就对了。如果全替换了那就又得有童鞋会问我只想替换一个，其它的不管。
所以呢，饭得一口一口吃，代码得一行一行码。

全部替换replace第一个参数可以直接传一个正则表达式，修饰符增加为全局查找，这样就可以替换所有字符串了；还有使用ES2021新的apireplaceAll也可以全局替换

  const str = 'abcdefjabcd'
  const newStr = str.replace(/a/g, 'p') // 使用正则替换全局字符
  console.log(newStr) // pbcdefjpbcd

  const strAll = str.replaceAll('a', p) // 使用新api替换全局字符
  console.log(strAll) // pbcdefjpbcd

进阶

当然不会那么简单了，我又不是水文章的

很多童鞋都不知道replace方法的第二个参数可以传一个回调函数

  const str = 'abcdefjabcd'
  const newStr = str.replace('a', (a,b,c) => {
    console.log(a, b, c) // a 0 abcdefjabcd
    return 'p'
  }) // 使用正则替换全局字符
  console.log(newStr) // pbcdefjabcd

可以看到，回调函数的返回值就是用来替换的值，回调函数的参数分别是：第一个参数是匹配的字符，第二个参数是匹配的索引，第三个参数是全部字符串

接着我们配合正则使用

  const str = 'abcdefjabcd'
  const newStr = str.replace(/a/g, (a,b,c) => {
    console.log(a, b, c) // a 0 abcdefjabcd
                        // a 7 abcdefjabcd
    return 'p'
  }) // 使用正则替换全局字符
  console.log(newStr) // pbcdefjpbcd

可以看出，正则全局匹配的时候会执行多次回调函数，这很正常，全局多个匹配当然得执行多次了，无可厚非

来一个复杂一点的正则，来体现回调函数的大用处

  const str = '我叫<%name>,今年<%age>岁,来自<%site>，哈哈'
  const user = {
    name: '张三',
    age: 32,
    site: '山东'
  }

  const newStr = str.replace(/<%(\w+)>/g, (a, b, c, d) => {
    console.log(a, b, c, d)
    // <%name> name 2 我叫<%name>,今年<%age>岁,来自<%site>，哈哈
    // <%age> age 12 我叫<%name>,今年<%age>岁,来自<%site>，哈哈
    // <%site> site 22 我叫<%name>,今年<%age>岁,来自<%site>，哈哈
    return user[b]
  })
  console.log(newStr) // 我叫张三,今年32岁,来自山东，哈哈

这有点像什么，是不是像字符串模板的感觉。眼尖的童鞋可能看到了，回调函数又多了一个参数，是的，你没有看错的确多了一个参数。这个参数就是正则括号里面匹配的值
所以得出结论，回调函数的参数

• 1.匹配的值
• 2+.匹配正则括号的值，可以是多个
• -2.倒数第二个参数，匹配值在全字符串的索引
• -1.倒数第一个参数，全字符串

这就是javascript的字符串的replace常见的用法。具体怎么使用还是得看业务需求