一文搞懂String的replace用法

String的replace方法的使用

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

  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常见的用法。具体怎么使用还是得看业务需求

你可能感兴趣的