天天看點

JavaScript String replaceAll()方法

JavaScript String replaceAll()方法

英文 | https://www.javascripttutorial.net/es-next/javascript-string-replaceall/

翻譯 | 楊小愛

今天,我們将一起來學習 StringreplaceAll()方法,該方法用新字元串替換所有出現的子字元串。

JavaScript 字元串replaceAll()方法介紹

Stringreplace()方法允許您用新的子字元串替換字元串中第一次出現的子字元串。

要将出現的所有子字元串替換為新的,您可以重複調用replace()方法或使用帶有全局标志 ( g)的正規表達式。

ES2021 引入了 StringreplaceAll()方法,該方法傳回一個新字元串,其中所有比對的模式都被替換:

String.prototype.replaceAll(pattern, replacement)      

pattern可以是一個字元串或正規表達式。當pattern是正規表達式時,需要包含全局标志( g);否則,replaceAll()将抛出異常。

假設您犯了一個錯誤,并且應該使用replace()方法來替換僅與模式比對的第一個比對項。

replacement參數可以是一個字元串或一個回調函數将被調用的每場比賽。

當replacement是回調函數時,它具有以下形式:

replacement(match, offset, str)      

該replacement回調具有下列參數:

  • match 是比對的子串。
  • offset是原始字元串中比對子字元串的偏移量。例如,如果原始字元串是'Hello',比對的子字元串是'll',那麼offset将是 2。
  • str 是原始字元串。

與replace()方法一樣,該replaceAll()方法不會更改原始字元串。它傳回新的全新字元串,其模式被替換項替換。

JavaScript String replaceAll() 示例

讓我們舉一些使用 JavaScript StringreplaceAll()方法的例子。

1) 簡單的 JavaScriptString replaceAll() 示例

下面的示例使用的字元串replaceAll()方法來代替串JS與串JavaScript字元串'中JS will, JS will, JS will rock you':

let str = 'JS will, JS will, JS will rock you.';
let newStr = str.replaceAll('JS','JavaScript');


console.log(newStr);      

輸出:

JavaScript will, JavaScript will, JavaScript will rock you.      

2) JavaScript String replaceAll() 帶回調函數示例

下面的示例使用 StringreplaceAll()方法通過正規表達式搜尋子字元串。它用回調函數确定的特定替換替換每個比對項:

let str = 'JS will, Js will, js will rock you.';


let pattern = /js/gi;


str.replaceAll(pattern, function(match, offset, str) {
    if(match === 'JS') return 'JavaScript';
    if(match === 'Js') return 'Javascript';
    if(match === 'js') return 'javascript';
    return '';
});


console.log(newStr);      

輸出:

JavaScript will, Javascript will, javascript will rock you.      

這個怎麼運作。

正規表達式/js/gi比對包含JS不區分大小寫的子字元串的任何字元串,即JS、Js、 或js。

replaceAll() 方法用替換回調的傳回值替換子串 JS、Js 和 js。

總結

  • 使用 JavaScript 字元串replaceAll()方法将所有出現的子字元串替換為字元串中的新子字元串。

最後,感謝您的閱讀,如果您覺得今天的内容對您有所幫助,也請您分享給您做開發的朋友,也許能夠幫助到他。

學習更多技能

請點選下方公衆号

JavaScript String replaceAll()方法

繼續閱讀