ES12 中的 String.prototype.replaceAll 方法使用示例

在 ES12 中，String.prototype 对象新增了 replaceAll 方法，该方法可以在字符串中查找所有匹配的子字符串，并将其替换为指定的新字符串。本文将详细介绍如何使用 replaceAll 方法，并提供实用的示例代码。

基本用法

replaceAll 方法接受两个参数，分别是要查找的子字符串和用于替换的新字符串。以下是示例代码：

const str = 'Hello, world!';
const newStr = str.replaceAll('l', 'X');
console.log(newStr); // HeXXo, worXd!

此代码会将所有的 'l' 字符替换成 'X' 字符。输出结果为 'HeXXo, worXd!'。

需要注意的是，replaceAll 方法是区分大小写的，如果要忽略大小写，可以使用正则表达式。例如，以下代码将所有的 'l' 字符不区分大小写替换成 'X' 字符：

const str = 'Hello, world!';
const newStr = str.replaceAll(/l/gi, 'X');
console.log(newStr); // HeXXo, worXd!

其中，/l/gi 是一个正则表达式，其中 g 表示全局匹配，i 表示不区分大小写。

实用示例

1. 移除字符串中的空格

const str = '   Hello,   world!   ';
const newStr = str.replaceAll(/\s/g, '');
console.log(newStr); // Hello,world!

此代码使用正则表达式 /\s/g 匹配所有的空格字符，并将其替换为空字符串。

2. 修正手机号格式

const phoneNumber = '123-4567-8901';
const newPhoneNumber = phoneNumber.replaceAll('-', '');
console.log(newPhoneNumber); // 12345678901

此代码使用 replaceAll 方法移除了手机号中的分隔符 -，修正了手机号的格式。

3. 高亮搜索关键字

const str = 'Hello, world!';
const keyword = 'world';
const newStr = str.replaceAll(keyword, `<span class="highlight">${keyword}</span>`);
console.log(newStr); // Hello, <span class="highlight">world</span>!

此代码使用 replaceAll 方法将匹配到的 keyword 高亮展示出来，增强了搜索结果的可读性。

总结

本文详细介绍了 ES12 中新增的 replaceAll 方法，并提供了实用的示例代码。在实际开发中，使用该方法可以方便地对字符串进行查找和替换操作，提高开发效率和代码质量。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aaf96848841e98946f1c44