提升代码效率：JavaScript includes()方法在字符串处理中的实战策略

站长

2024年03月31日 21:18 · 阅读数 4

引言

JavaScript中 includes() 方法是字符串对象的一个内置方法，旨在提供一种简洁而直观的方式，用于检测一个字符串中是否包含指定的子字符串。以下是对其功能、行为和用法的详细描述：

基础语法与参数

includes() 方法执行区分大小写的搜索，以确定是否可以在一个字符串中找到另一个字符串，并根据情况返回 true 或 false。其基本语法如下：

string.includes(searchValue[, fromIndex])

searchValue: 必需，要查找的子字符串。
fromIndex: 可选，整数，表示开始查找的位置。默认值为 0，即从字符串的起始位置开始查找。

该方法返回一个布尔值：

true: 如果 searchValue 存在于原字符串中。
false: 如果 searchValue 不存在于原字符串中。

使用场景

1. 用户输入验证：检查用户提交的表单数据（如用户名、邮箱地址、密码等）是否包含特定字符或短语，以满足格式要求或防止恶意输入。

function isValidUsername(username) {
  return username.includes("@") && username.includes(".");
}

const email = "user@example.com";
console.log(isValidUsername(email)); // true

2. 内容过滤：在处理文本内容时，检测是否包含敏感词、非法字符或特定关键词，以进行内容审核、自动标记或过滤。

function containsProfanity(text) {
  const profanities = ["swearword1", "swearword2", "etc."];
  return profanities.some(word => text.includes(word));
}

const message = "This message contains a swearword!";
console.log(containsProfanity(message)); // true

3. 路径处理：在URL、文件路径或目录结构中，检查是否包含特定路径片段、文件扩展名等。

function isImageFile(path) {
  return path.endsWith(".jpg") || path.endsWith(".png") || path.includes(".jpeg");
}

const imagePath = "/images/example.jpg";
console.log(isImageFile(imagePath)); // true

4. 数据清洗：清理文本数据，移除或替换包含特定字符或模式的字符串部分。

function removeInvalidChars(input) {
  const invalidChars = ["\\", "/", "*", "?", "<", ">", "|"];
  for (const char of invalidChars) {
    while (input.includes(char)) {
      input = input.replace(char, "");
    }
  }
  return input;
}

const dirtyData = "Unsafe*Characters\\In?Here>";
const cleanedData = removeInvalidChars(dirtyData);
console.log(cleanedData); // "UnsafeCharactersInHere"

实战技巧

1. 不区分大小写查找：虽然 includes() 默认区分大小写，但可以通过将字符串和查找值转换为统一的大小写形式（通常为全小写或全大写）来实现不区分大小写的查找。

const str = "Hello, World!";
const searchValue = "world";

if (str.toLowerCase().includes(searchValue.toLowerCase())) {
  console.log(`${searchValue} is found (case-insensitive).`);
}

2. 从指定位置开始查找：虽然 includes() 本身不支持从指定索引开始查找，但可以通过截取子字符串实现类似效果。

const str = "Hello, world! How are you?";
const searchFromIndex = 7;
const searchValue = "world";

if (str.slice(searchFromIndex).includes(searchValue)) {
  console.log(`${searchValue} is found after index ${searchFromIndex}.`);
}

3. 组合使用其他字符串方法：与其他字符串方法（如 trim(), split(), substring(), replace() 等）配合，可以实现更复杂的文本处理逻辑。

const sentence = "A quick brown fox jumps over the lazy dog.";
const wordToFind = "fox";

const words = sentence.split(' ');
const isWordPresent = words.some(word => word.includes(wordToFind));

console.log(`The word "${wordToFind}" is ${isWordPresent ? 'present' : 'absent'} in the sentence.`);

4.空字符串检查：includes() 认为空字符串是任何字符串（包括空字符串自身）的有效子字符串，因此对空字符串的检查总是返回 true。在检查字符串是否为空时，直接使用 str.length === 0 更为直观。

const str = "";
console.log(str.includes("")); // true

5.类型安全：虽然 includes() 会尝试将非字符串参数转换为字符串，但在编写代码时，最好确保传入的 searchValue 是预期的字符串类型，以避免潜在的类型转换问题和意外行为。

6.多位置匹配：includes() 只需找到子字符串在一个字符串中的任意位置即可返回 true，它不会返回所有匹配的位置。如果你需要找出所有匹配位置，应使用正则表达式与 match() 或 exec() 方法结合。

7.替代 indexOf() 方法：includes() 方法是对传统 indexOf() 方法的一种更简洁、易读的替代。两者都能检测子字符串是否存在，但 indexOf() 返回的是子字符串的索引（如果存在）或 -1（不存在），而 includes() 直接返回布尔值。在只需要知道是否包含而不关心具体位置的情况下，includes() 更为直接。

写在最后

综上所述，includes() 方法在JavaScript字符串处理中具有广泛的应用，无论是简单的包含性检查，还是更复杂的文本分析与处理场景，都能提供简洁高效的解决方案。熟练运用上述技巧，可以帮助你更好地利用 includes() 实现各种字符串相关的任务。

喜欢的话帮忙点个赞 + 关注吧，将持续更新 JavaScript 相关的文章，还可以关注我的公众号 梁三石FE ，感谢您的关注~