关于javascript:一文搞懂String的replace用法

16次阅读

共计 1616 个字符，预计需要花费 5 分钟才能阅读完成。

大部分语言的都有字符串类型，字符串类型根本都有 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 岁, 来自山东，哈哈

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