一文搞懂String的replace用法詳情 - javascript,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歲,來自山東，哈哈

這有點像什麼，是不是像字符串模板的感覺。眼尖的童鞋可能看到了，回調函數又多了一個參數，是的，你沒有看錯的確多了一個參數。這個參數就是正則括號裏面匹配的值
所以得出結論，回調函數的參數