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 标签。

原创文章，作者：JEDLP，如若转载，请注明出处：https://www.506064.com/n/331324.html