乐趣区

关于javascript:一文搞懂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 常见的用法。具体怎么应用还是得看业务需要

退出移动版