判断字符串是否包含特定词的JS方法

在JavaScript开发中，判断字符串是否包含特定关键词是常见需求，但开发者常在使用`String.prototype.includes()`方法时混淆检查方向，导致判断失败。本文深入探讨了`includes()`方法的正确使用方式，强调了检查方向的重要性。通过一个常见的错误示例，指出了将关键词作为调用对象，目标字符串作为参数的逻辑错误。针对此问题，本文提出了一个健壮的解决方案，结合`Array.prototype.some()`和`toLowerCase()`方法，实现了不区分大小写的关键词匹配，确保代码能够准确无误地识别目标字符串中是否包含指定的关键词，从而避免潜在的bug。同时，本文还探讨了高级考量与最佳实践，如大小写敏感性处理、多个关键词匹配以及性能优化策略，旨在帮助开发者编写更高效、更可靠的JavaScript代码。

引言与常见误区

在JavaScript开发中，判断一个字符串是否包含特定的子字符串或关键词是常见的需求。然而，开发者在使用String.prototype.includes()方法时，常常会犯一个逻辑上的错误，即混淆了检查的方向。当我们需要判断一个较长的目标字符串（例如一个产品集合名称 collectionName）是否包含数组中的任一关键词（例如 productTags）时，如果错误地将关键词作为调用对象，将导致判断失败。

考虑以下场景：我们有一个产品标签数组 productTags = ["product"] 和一个集合名称 collectionName = "e23product32"。我们希望当 collectionName 包含 "product" 时，添加一个特定的HTTP头。

以下是一个常见的错误实现示例：

const productTags = [
  "product"
];

const collectionName = 'e23product32';

const headers = {
  // 错误：tag.includes(collectionName) 检查的是 "product" 是否包含 "e23product32"
  ...(productTags.some((tag) => tag.includes(collectionName)) && {
    "newProduct": "yes",
  }),
};

console.log(headers); // 输出: {}

在这个示例中，console.log(headers) 的结果是一个空对象 {}，这意味着条件判断为 false，未能成功添加 newProduct 头。其根本原因是 tag.includes(collectionName) 的逻辑是反向的。它在检查字符串 "product" 是否包含 "e23product32"，而显然，一个短字符串不可能包含一个长字符串，因此条件始终不成立。

理解 String.prototype.includes()

String.prototype.includes() 方法用于判断一个字符串是否包含另一个字符串。其基本语法是：

str.includes(searchString[, position])

• str: 必需，要被搜索的字符串。
• searchString: 必需，要搜索的子字符串。
• position: 可选，从 str 的哪个索引位置开始搜索 searchString。默认值为 0。

关键在于，includes() 方法检查的是调用它的字符串 (str) 是否包含作为参数传入的字符串 (searchString)。在上述错误示例中，tag 是调用者，collectionName 是参数，因此它检查的是 tag 是否包含 collectionName。

正确的关键词匹配方案

为了正确判断 collectionName 是否包含 productTags 数组中的任一关键词，我们需要将检查方向反转，即让 collectionName 作为 includes() 方法的调用者，tag 作为参数。同时，为了提高匹配的灵活性，通常还需要进行不区分大小写的匹配。

我们可以结合 Array.prototype.some() 方法来遍历 productTags 数组，并对每个标签执行正确的 includes() 检查。some() 方法会在数组中找到至少一个满足条件的元素时立即返回 true。

以下是修正后的代码示例：

const productTags = ["product", "item"]; // 可以包含多个关键词
const collectionName = "e23Product32"; // 模拟实际数据，可能大小写不一致

const headers = {
  ...(productTags.some((tag) =>
    collectionName.toLowerCase().includes(tag.toLowerCase())
  ) && {
    newProduct: "yes",
  }),
};

console.log(headers); // 输出: { newProduct: 'yes' }

代码解析：

1. productTags.some(...): 遍历 productTags 数组中的每一个 tag。
2. collectionName.toLowerCase(): 将目标字符串 collectionName 转换为小写。这是为了确保匹配是不区分大小写的，例如 "Product" 和 "product" 都能被正确识别。
3. tag.toLowerCase(): 将当前的关键词 tag 也转换为小写，以便与已转换为小写的 collectionName 进行匹配。
4. .includes(...): 调用 collectionName.toLowerCase() 的 includes 方法，并传入 tag.toLowerCase() 作为参数。这样就正确地检查了 collectionName 是否包含当前的 tag。
5. && { newProduct: "yes" }: 如果 some() 方法返回 true（即找到了匹配的关键词），则 newProduct: "yes" 这个对象字面量会被展开到 headers 对象中。

通过这种方式，当 collectionName 为 "e23Product32" 且 productTags 包含 "product" 时，"e23product32".toLowerCase().includes("product".toLowerCase()) 会评估为 true，从而正确地添加 newProduct 头。

高级考量与最佳实践

1. 大小写敏感性处理

如上述示例所示，使用 toLowerCase()（或 toUpperCase()）是处理不区分大小写匹配的标准做法。这确保了无论关键词和目标字符串的大小写如何，都能进行有效的匹配。

2. 多个关键词匹配

Array.prototype.some() 方法非常适合处理需要检查目标字符串是否包含任意一个给定关键词列表的场景。如果需要检查是否包含所有关键词，则可以使用 Array.prototype.every() 方法，并调整其内部逻辑。

3. 性能考量

对于大多数Web应用场景，使用 includes() 和 some() 的组合在性能上是足够的。然而，如果需要处理极大的字符串或关键词列表，并且性能成为关键瓶颈，可以考虑以下优化：

• 构建Set进行快速查找： 如果关键词是固定的且数量庞大，可以预先将关键词构建成 Set，但这主要适用于精确匹配整个单词，而非子字符串包含。
• 正则表达式： 对于更复杂的模式匹配（例如，匹配单词边界、多个可选模式等），正则表达式提供了强大的功能。

例如，使用正则表达式匹配单词 "product"（忽略大小写，且只匹配整个单词）：

const productTagsRegex = [/\bproduct\b/i]; // \b表示单词边界，i表示不区分大小写
const collectionName = "e23Product32 is about a product";

const headersWithRegex = {
  ...(productTagsRegex.some((regex) => regex.test(collectionName)) && {
    "newProduct": "yes",
  }),
};

console.log(headersWithRegex); // 输出: { newProduct: 'yes' }

请注意，正则表达式的性能开销通常高于简单的 includes()，应根据实际需求权衡使用。

总结

在JavaScript中检查字符串是否包含特定关键词时，核心在于正确理解 String.prototype.includes() 方法的调用方向。始终确保 includes() 的调用者是需要被检查的字符串，而参数是待查找的子字符串。结合 Array.prototype.some() 可以高效地遍历关键词列表，并通过 toLowerCase() 方法实现不区分大小写的匹配，从而构建出健壮、准确的字符串包含判断逻辑。在面对更复杂的匹配需求时，正则表达式也是一个强大的备选工具。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~