JS String 替換詳解

在 JavaScript 中，字符串是一種基本的數據類型，因此經常需要對字符串進行操作。其中涉及到 JS String 替換，即用新的子字符串替換原始的子字符串。

一、使用replace()方法進行JS String替換

replace() 方法是 JavaScript 中的字符串方法，可以在字符串中查找並替換指定子字符串。

  
    let str = "Hello World";
    let newStr = str.replace("World", "JavaScript");
    console.log(newStr); // 輸出：Hello JavaScript
  

replace() 方法的第一個參數指定了要被替換的字符串，第二個參數指定了用來替換的新字符串。

replace() 方法僅替換首個匹配項。如果要將字符串中所有匹配項都替換為新字符串，可以使用正則表達式進行全局替換。

例如：

  
    let str = "Hello Hello World";
    let newStr = str.replace(/Hello/g, "JavaScript");
    console.log(newStr); // 輸出：JavaScript JavaScript World
  

二、使用split()方法將字符串轉換為數組再進行替換

還可以通過將字符串轉換為數組，使用 ES6 中的 map() 方法對數組進行遍歷和操作，然後將數組轉換回字符串來進行替換。

  
    let str = "Hello World";
    let arr = str.split(" ");
    let newArr = arr.map((item) => {
      if (item === "World") {
        return "JavaScript";
      } else {
        return item;
      }
    });
    let newStr = newArr.join(" ");
    console.log(newStr); // 輸出：Hello JavaScript
  

使用 split() 方法將字符串轉換為數組，指定分隔符 ” “（空格）將字符串分割成單獨的單詞。使用 map() 方法遍曆數組，替換指定子字符串。最後使用 join() 方法將數組轉換回字符串。

三、使用正則表達式進行高級替換

使用正則表達式進行字符串替換的好處在於可以實現高級的替換策略，例如忽略大小寫、替換多個匹配項等等。

下面是一個示例，將字符串中所有的元音字母替換為 “x”：

  
    let str = "Hello World";
    let newStr = str.replace(/[aeiou]/gi, "x");
    console.log(newStr); // 輸出：Hxllx Wxrld
  

正則表達式 /[aeiou]/gi 匹配字符串中所有的元音字母，並使用 “x” 替換。

四、使用模板字符串進行字符串拼接和替換

模板字符串是一種更加方便的字符串拼接和替換方式，也是 ES6 中的新特性。

模板字符串使用反引號（`）來定義字符串，可以通過 ${} 語法插入變量和表達式。

  
    let name = "Tony";
    let age = 25;
    let str = `My name is ${name}, and I'm ${age} years old.`;
    console.log(str); // 輸出：My name is Tony, and I'm 25 years old.
  

模板字符串中的 ${} 插入變量或表達式，可以與基本的替換方法一起使用，例如：

  
    let str = "Hello World";
    let newStr = `${str.replace("World", "JavaScript")} and Node.js`;
    console.log(newStr); // 輸出：Hello JavaScript and Node.js
  

五、使用replace()方法替換多個子字符串

雖然 replace() 方法只能替換一個子字符串，但通過嵌套使用 replace() 方法，可以實現替換多個子字符串。例如：

  
    let str = "Hello World";
    let newStr = str.replace("World", "JavaScript")
      .replace("Hello", "Hi");
    console.log(newStr); // 輸出：Hi JavaScript
  

以上代碼中，先使用 replace() 方法將第一個匹配項 “World” 替換為 “JavaScript“，然後再調用一次 replace() 方法將第二個匹配項 “Hello” 替換為 “Hi“。

六、結合其他方法進行複雜替換

最後，我們可以通過結合其他方法，使用更為複雜的替換方式。

下面的示例將時間戳轉換為日期字符串，並在字符串中嵌入 HTML 標籤：

  
    let timestamp = 1609459200000; // 2021/1/1 0:0:0
    let date = new Date(timestamp);
    let year = date.getFullYear();
    let month = ("0" + (date.getMonth() + 1)).slice(-2);
    let day = ("0" + date.getDate()).slice(-2);
    let str = `今天是${year}年${month}月${day}日，這是一個重要的日期。`;
    console.log(str); // 輸出：今天是2021年01月01日，這是一個重要的日期。
  

使用 Date 對象將時間戳轉換為日期對象，然後使用 getFullYear()、getMonth()、getDate() 等方法獲取年月日等信息。最後將這些信息嵌入到模板字符串中，並嵌入 HTML 標籤。