JavaScript 字符串与正则表达式实战教程：从基础到高级技巧-CSDN博客

本文链接：https://blog.csdn.net/caifox/article/details/147702835

本教程旨在为 JavaScript 开发者提供一份全面、实用的字符串与正则表达式指南。从基础的字符串操作到高级的正则表达式应用，我们将通过清晰的示例和详细的解释，帮助读者逐步掌握这些技能。无论你是初学者还是有一定经验的开发者，本教程都将为你提供宝贵的参考，让你在处理字符串和正则表达式时更加得心应手。让我们一起开启这段探索之旅，解锁 JavaScript 字符串与正则表达式的强大功能吧！

1. 字符串与正则表达式基础

1.1 字符串基本操作

在 JavaScript 中，字符串是基本数据类型之一，用于表示文本内容。字符串可以使用单引号（'）、双引号（"）或反引号（`）定义。例如：

let singleQuoted = 'Hello, world!';
let doubleQuoted = "Hello, world!";
let templateString = `Hello, world!`;

字符串的基本操作包括获取长度、访问单个字符、拼接字符串等。例如：

let str = 'Hello, world!';
console.log(str.length); // 输出字符串长度：13
console.log(str[0]); // 访问第一个字符：H
console.log(str.concat(' This is JavaScript.')); // 拼接字符串：Hello, world! This is JavaScript.

1.2 正则表达式简介

正则表达式是一种用于匹配字符串中字符组合的模式，广泛用于字符串的搜索、替换和验证等操作。在 JavaScript 中，正则表达式可以通过两种方式创建：

使用正则表达式字面量：/pattern/flags
使用 RegExp 构造函数：new RegExp(pattern, flags)

例如，创建一个匹配数字的正则表达式：

let regex = /\d+/; // 匹配一个或多个数字
console.log(regex.test('123')); // true
console.log(regex.test('abc')); // false

正则表达式的常用标志包括：

g：全局匹配
i：不区分大小写
m：多行匹配

正则表达式可以用于字符串的 match、replace、search 和 split 等方法中，以实现复杂的字符串操作。

2. 字符串操作技巧

2.1 检查已存在的非空字符串

在 JavaScript 中，检查一个字符串是否为非空字符串是一个常见的操作，尤其是在数据验证场景中。可以通过简单的条件判断来实现：

let str = "Hello, world!";
if (str && str.trim().length > 0) {
    console.log("这是一个非空字符串");
} else {
    console.log("这是一个空字符串");
}

str 是需要检查的字符串。
str.trim() 用于移除字符串两端的空白字符，确保字符串中确实有内容。
str.trim().length > 0 检查移除空白字符后的字符串长度是否大于 0，从而判断是否为非空字符串。

2.2 将数值转换为格式化字符串

将数值转换为格式化字符串在处理数字显示时非常有用，例如在金融应用中显示货币格式。可以使用 Intl.NumberFormat 对象来实现：

let num = 1234567.89;
let formattedNum = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
}).format(num);
console.log(formattedNum); // 输出：$1,234,567.89

Intl.NumberFormat 是一个国际化数字格式化工具。
'en-US' 指定语言环境为美国英语。
style: 'currency' 指定格式化为货币格式。
currency: 'USD' 指定货币类型为美元。
format(num) 将数值 num 转换为格式化的字符串。

2.3 插入特殊字符

在字符串中插入特殊字符，如换行符、制表符等，可以通过转义字符 \ 来实现：

let str = "第一行\n第二行\t制表符";
console.log(str);
// 输出：
// 第一行
// 第二行    制表符

\n 表示换行符。
\t 表示制表符。
使用转义字符可以方便地在字符串中插入这些特殊字符。

2.4 插入表情符号

在 JavaScript 中，可以直接将表情符号作为字符串的一部分插入：

let str = "Hello, world! ";
console.log(str); // 输出：Hello, world!

表情符号可以直接复制粘贴到字符串中，JavaScript 会正确处理 Unicode 字符。

2.5 使用模板字符串实现更清晰的字符串拼接

模板字符串是 ES6 引入的一种新特性，使用反引号 ` 定义，可以方便地嵌入变量和表达式，使字符串拼接更加清晰：

let name = "Alice";
let age = 25;
let message = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(message); // 输出：Hello, my name is Alice and I am 25 years old.

使用 ${} 可以将变量或表达式嵌入到模板字符串中。
模板字符串支持多行字符串，不需要使用 \n 来换行：

let multiLineStr = `第一行
第二行
第三行`;
console.log(multiLineStr);
// 输出：
// 第一行
// 第二行
// 第三行

3. 字符串比较与查找

3.1 执行不区分大小写的字符串比较

在 JavaScript 中，执行不区分大小写的字符串比较可以通过将两个字符串都转换为小写或大写，然后进行比较来实现。这种方法可以确保比较时忽略字符的大小写差异。例如：

let str1 = "Hello";
let str2 = "hello";

if (str1.toLowerCase() === str2.toLowerCase()) {
    console.log("两个字符串相等（不区分大小写）");
} else {
    console.log("两个字符串不相等");
}

toLowerCase() 方法将字符串转换为小写。
toUpperCase() 方法也可以将字符串转换为大写，同样可以用于比较。
这种方法适用于需要忽略大小写差异的场景，例如用户输入验证或搜索功能中。

3.2 检查字符串是否包含特定子字符串

检查一个字符串是否包含特定的子字符串可以使用 includes() 方法。该方法返回一个布尔值，表示字符串中是否包含指定的子字符串。例如：

let str = "Hello, world!";
let substr = "world";

if (str.includes(substr)) {
    console.log("字符串包含子字符串");
} else {
    console.log("字符串不包含子字符串");
}

includes() 方法从字符串的指定位置开始查找子字符串，默认从字符串的开头开始查找。
如果需要从特定位置开始查找，可以传递第二个参数作为起始索引：

let str = "Hello, world!";
let substr = "world";

if (str.includes(substr, 7)) {
    console.log("从索引 7 开始查找，字符串包含子字符串");
} else {
    console.log("从索引 7 开始查找，字符串不包含子字符串");
}

这种方法简单高效，适用于各种字符串查找场景。

3.3 查找所有匹配的模式实例

查找字符串中所有匹配的模式实例可以使用正则表达式的 match() 方法。该方法返回一个数组，包含所有匹配的子字符串。如果正则表达式带有全局标志 g，则可以找到所有匹配项。例如：

let str = "Hello, world! Hello, JavaScript!";
let regex = /Hello/g;

let matches = str.match(regex);
console.log(matches); // 输出：["Hello", "Hello"]

match() 方法返回一个数组，包含所有匹配的子字符串。
如果没有找到匹配项，则返回 null，因此在使用返回值之前需要进行检查：

let str = "Hello, world!";
let regex = /Goodbye/g;

let matches = str.match(regex);
if (matches) {
    console.log(matches);
} else {
    console.log("没有找到匹配项");
}

使用正则表达式可以灵活地定义匹配模式，例如忽略大小写或匹配特定的字符组合：

let str = "Hello, world! hello, JavaScript!";
let regex = /hello/gi;

let matches = str.match(regex);
console.log(matches); // 输出：["Hello", "hello"]

在这个例子中，i 标志表示不区分大小写，g 标志表示全局匹配。

4. 字符串替换与格式化

4.1 替换字符串中的所有匹配项

在 JavaScript 中，替换字符串中的所有匹配项可以通过 String.prototype.replace() 方法结合正则表达式的全局标志 g 来实现。这种方法可以确保替换操作应用于字符串中的所有匹配项，而不仅仅是第一个匹配项。例如：

let str = "Hello, world! Hello, JavaScript!";
let regex = /Hello/g;
let replacedStr = str.replace(regex, "Hi");
console.log(replacedStr); // 输出：Hi, world! Hi, JavaScript!

replace() 方法的第一个参数是正则表达式，用于指定要替换的模式。
第二个参数是替换后的字符串。
使用全局标志 g 可以确保替换操作应用于字符串中的所有匹配项。
如果没有使用全局标志 g，则只会替换第一个匹配项：

let str = "Hello, world! Hello, JavaScript!";
let regex = /Hello/;
let replacedStr = str.replace(regex, "Hi");
console.log(replacedStr); // 输出：Hi, world! Hello, JavaScript!

在实际应用中，全局替换通常更符合需求，尤其是在处理包含多个匹配项的字符串时。

4.2 将 HTML 标签替换为命名实体

在处理 HTML 内容时，有时需要将 HTML 标签替换为对应的命名实体，以避免标签被浏览器解析。这可以通过正则表达式和 replace() 方法实现。例如，将 < 和 > 替换为 < 和 >：

let htmlStr = "<div>Hello, world!</div>";
let replacedStr = htmlStr.replace(/</g, "&lt;").replace(/>/g, "&gt;");
console.log(replacedStr); // 输出：&lt;div&gt;Hello, world!&lt;/div&gt;

使用正则表达式 /</g 和 />/g 分别匹配 < 和 >，并使用全局标志 g 确保替换所有匹配项。
替换后的字符串可以安全地插入到 HTML 中，而不会被浏览器解析为 HTML 标签。
这种方法在处理用户输入的 HTML 内容时特别有用，可以防止 XSS（跨站脚本攻击）等安全问题。

4.3 使用正则表达式替换字符串中的模式

正则表达式提供了强大的模式匹配能力，可以用于复杂的字符串替换操作。通过 replace() 方法和正则表达式，可以实现各种复杂的替换需求。例如，将字符串中的数字替换为括号包围的形式：

let str = "Hello, 123 world!";
let regex = /\d+/g;
let replacedStr = str.replace(regex, "($&)");
console.log(replacedStr); // 输出：Hello, (123) world!

$& 是一个特殊变量，表示匹配的整个字符串。
使用正则表达式 \d+ 匹配一个或多个数字，并通过 $& 将其替换为括号包围的形式。
正则表达式还可以结合捕获组和替换字符串中的特殊变量来实现更复杂的替换逻辑。例如，将日期格式从 YYYY-MM-DD 转换为 MM/DD/YYYY：

let str = "2025-05-04";
let regex = /(\d{4})-(\d{2})-(\d{2})/;
let replacedStr = str.replace(regex, "$2/$3/$1");
console.log(replacedStr); // 输出：05/04/2025

捕获组 (\d{4})、(\d{2}) 和 (\d{2}) 分别匹配年、月和日。
使用 $1、$2 和 $3 引用捕获组的内容，重新排列日期格式。
这种方法可以灵活地处理各种复杂的字符串替换需求，适用于数据格式化、文本处理等场景。

5. 字符串提取与转换

5.1 从字符串中提取列表

从字符串中提取列表可以通过正则表达式和 match() 方法实现。例如，从一个包含多个单词的字符串中提取单词列表：

let str = "apple, banana, orange, grape";
let regex = /[a-zA-Z]+/g;
let list = str.match(regex);
console.log(list); // 输出：["apple", "banana", "orange", "grape"]

match() 方法结合正则表达式 /[a-zA-Z]+/g 可以匹配字符串中的所有单词。
正则表达式 [a-zA-Z]+ 匹配一个或多个字母，g 标志表示全局匹配。
如果字符串中包含特殊字符或数字，可以根据需要调整正则表达式。例如，提取包含数字的单词：

let str = "apple1, banana2, orange3, grape4";
let regex = /[a-zA-Z0-9]+/g;
let list = str.match(regex);
console.log(list); // 输出：["apple1", "banana2", "orange3", "grape4"]

在这个例子中，[a-zA-Z0-9]+ 匹配一个或多个字母或数字。

5.2 移除字符串开头和结尾的空白字符

移除字符串开头和结尾的空白字符可以使用 trim() 方法。该方法返回一个移除了两端空白字符的新字符串，不会修改原字符串。例如：

let str = "   Hello, world!   ";
let trimmedStr = str.trim();
console.log(trimmedStr); // 输出："Hello, world!"

trim() 方法移除字符串两端的空白字符，包括空格、制表符、换行符等。
如果需要移除字符串中的所有空白字符，可以使用正则表达式和 replace() 方法：

let str = "   Hello,   world!   ";
let noWhitespaceStr = str.replace(/\s+/g, "");
console.log(noWhitespaceStr); // 输出："Hello,world!"

在这个例子中，\s+ 匹配一个或多个空白字符，g 标志表示全局匹配，replace() 方法将所有空白字符替换为空字符串。

5.3 将字符串的首字母转换为大写

将字符串的首字母转换为大写可以通过正则表达式和 replace() 方法实现。例如：

let str = "hello, world!";
let capitalizedStr = str.replace(/^[a-z]/, (match) => match.toUpperCase());
console.log(capitalizedStr); // 输出："Hello, world!"

正则表达式 /^[a-z]/ 匹配字符串的第一个小写字母。
replace() 方法的第二个参数是一个函数，match 是匹配到的字符。
match.toUpperCase() 将匹配到的字符转换为大写。
如果需要将每个单词的首字母都转换为大写，可以使用以下方法：

let str = "hello, world!";
let capitalizedStr = str.replace(/\b[a-z]/g, (match) => match.toUpperCase());
console.log(capitalizedStr); // 输出："Hello, World!"

在这个例子中，\b 表示单词边界，[a-z] 匹配小写字母，g 标志表示全局匹配。

6. 字符串验证与应用

6.1 验证电子邮件地址

在 JavaScript 中，验证电子邮件地址是一种常见的字符串验证场景。电子邮件地址的格式通常遵循一定的规则，例如包含 @ 符号和域名部分。可以通过正则表达式来验证电子邮件地址是否符合标准格式。以下是一个常用的电子邮件验证正则表达式及其使用方法：

let emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
let email = "example@example.com";

if (emailRegex.test(email)) {
    console.log("这是一个有效的电子邮件地址");
} else {
    console.log("这不是一个有效的电子邮件地址");
}

正则表达式 /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/ 的解释：
- ^[a-zA-Z0-9._-]+：匹配电子邮件地址的用户名部分，允许字母、数字、点号、下划线和破折号，且至少出现一次。
- @：必须包含一个 @ 符号。
- [a-zA-Z0-9.-]+：匹配域名部分，允许字母、数字、点号和破折号，且至少出现一次。
- \.[a-zA-Z]{2,6}：匹配顶级域名，必须以点号开头，后跟 2 到 6 个字母。
test() 方法用于测试字符串是否匹配正则表达式，返回一个布尔值。
这种方法可以有效验证大多数常见的电子邮件地址格式，但需要注意，电子邮件地址的标准非常复杂，完全符合标准的正则表达式会更加复杂。在实际应用中，可以根据需求选择合适的正则表达式。

7. 总结

在本教程中，我们深入探讨了 JavaScript 中字符串与正则表达式的各种操作技巧。从基础的字符串检查到复杂的正则表达式应用，我们逐步了解了如何高效地处理和验证字符串数据。

7.1 字符串操作的核心技巧

我们首先介绍了如何检查非空字符串，这对于数据验证至关重要。通过 trim() 和长度检查，可以确保字符串中确实有有效内容。接着，我们学习了如何将数值转换为格式化字符串，这对于金融和报表应用非常有用。此外，我们还探讨了如何在字符串中插入特殊字符和表情符号，这使得字符串的表达更加丰富多样。

7.2 模板字符串与字符串拼接

模板字符串是 ES6 引入的强大特性，它极大地简化了字符串拼接的语法。通过模板字符串，可以轻松嵌入变量和表达式，使代码更加清晰易读。同时，模板字符串支持多行字符串，这在处理多行文本时非常方便。

7.3 字符串比较与查找

我们介绍了如何执行不区分大小写的字符串比较，这对于用户输入验证和搜索功能非常实用。此外，我们还探讨了如何检查字符串是否包含特定子字符串，以及如何查找所有匹配的模式实例。这些方法在文本处理和数据验证中非常常见。

7.4 字符串替换与格式化

替换字符串中的所有匹配项是文本处理中的常见需求。我们通过正则表达式和 replace() 方法实现了这一功能。此外，我们还介绍了如何将 HTML 标签替换为命名实体，这在处理用户输入的 HTML 内容时可以防止 XSS 攻击。正则表达式在字符串替换中发挥了强大的作用，可以实现复杂的模式匹配和替换逻辑。