一文搞懂String的replace用法

周皺發表於2021-09-06

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常見的用法。具體怎麼使用還是得看業務需求

相關文章