js如何判断字符串包含子串 字符串包含检测的3种实用技巧

判断javascript字符串是否包含子串，主要有三种方法：1.includes() 方法最直观且推荐，返回布尔值表示是否包含指定子串；2.indexof() 方法通过返回索引或 -1 判断是否包含，需额外比较操作；3.正则表达式 test() 方法更灵活，支持复杂模式匹配。选择依据具体需求：简单查找推荐 includes()，需要获取索引或兼容旧浏览器用 indexof()，复杂匹配则使用正则表达式。性能优化建议避免复制字符串、缓存正则表达式、优先使用原生方法。处理特殊字符时需转义，unicode 字符需规范化，大小写不敏感可用 i 标志或统一转换大小写。兼容性方面，旧浏览器可使用 indexof() 或 polyfill 实现 includes() 支持。

判断JavaScript字符串是否包含子串，核心在于使用字符串自带的方法或者正则表达式，各有优劣，选择取决于具体场景和性能需求。

解决方案

JavaScript提供了多种方法来判断字符串是否包含子串。主要有三种：includes()、indexOf() 和正则表达式的 test() 方法。

1. includes() 方法：这是最直观和推荐的方法。它返回一个布尔值，表示字符串中是否包含指定的子字符串。

   const str = "Hello, world!";
   const contains = str.includes("world"); // true
   const notContains = str.includes("universe"); // false

   includes() 方法还可以接受第二个参数，表示搜索的起始位置：

   const str = "Hello, world! world!";
   const containsFromIndex = str.includes("world", 8); // true，从索引8开始搜索

2. indexOf() 方法：这个方法返回子字符串在字符串中首次出现的索引。如果未找到子字符串，则返回 -1。

   const str = "Hello, world!";
   const index = str.indexOf("world"); // 7
   const notFound = str.indexOf("universe"); // -1
   
   const contains = index !== -1; // true

   indexOf() 方法也接受第二个参数，表示搜索的起始位置：

   const str = "Hello, world! world!";
   const indexFromIndex = str.indexOf("world", 8); // 14，从索引8开始搜索

   使用 indexOf() 的一个潜在问题是，需要额外的比较操作 (!== -1) 来确定是否包含子字符串，这稍微增加了代码的复杂性。

3. 正则表达式 test() 方法：这种方法更灵活，可以进行更复杂的模式匹配。

   const str = "Hello, world!";
   const regex = /world/;
   const contains = regex.test(str); // true
   
   const caseInsensitiveRegex = /world/i; // i 标志表示忽略大小写
   const containsCaseInsensitive = caseInsensitiveRegex.test("Hello, World!"); // true

   使用正则表达式的优点是能够进行更复杂的匹配，例如忽略大小写、匹配特定模式等。缺点是正则表达式的性能可能不如 includes() 或 indexOf()，尤其是在简单字符串查找的情况下。而且，正则表达式的语法相对复杂，需要一定的学习成本。

includes()、indexOf() 和正则表达式，我该选择哪个？

• 如果只需要简单地判断字符串是否包含子字符串，并且对性能要求不高，那么 includes() 是最佳选择，因为它简洁易懂。
• 如果需要获取子字符串的索引位置，或者需要兼容不支持 includes() 的旧版本浏览器，那么 indexOf() 是一个不错的选择。
• 如果需要进行复杂的模式匹配，例如忽略大小写、匹配多个可能的子字符串等，那么正则表达式是唯一的选择。

如何优化字符串包含检测的性能？

字符串包含检测的性能瓶颈通常出现在以下几个方面：

• 字符串长度：字符串越长，搜索时间越长。
• 子字符串长度：子字符串越长，搜索时间也可能增加，但影响相对较小。
• 搜索频率：如果需要频繁进行字符串包含检测，那么性能优化就显得尤为重要。

以下是一些优化建议：

1. 避免不必要的字符串复制：在进行字符串操作之前，尽量避免创建不必要的字符串副本。例如，如果需要将多个字符串连接起来，可以使用数组的 join() 方法，而不是使用 + 运算符进行多次连接。

   

   Cardify卡片工坊

   使用Markdown一键生成精美的小红书知识卡片

   下载

2. 使用正确的算法：对于简单的字符串包含检测，includes() 和 indexOf() 通常已经足够快。但是，对于更复杂的模式匹配，可能需要选择更高效的正则表达式算法。

3. 缓存正则表达式：如果需要多次使用同一个正则表达式进行匹配，那么应该将正则表达式缓存起来，避免重复编译。

   const regex = /pattern/; // 在函数外部定义正则表达式
   function checkString(str) {
     return regex.test(str);
   }

4. 利用浏览器优化：现代浏览器对字符串操作进行了大量的优化。因此，尽量使用浏览器提供的原生方法，而不是自己实现字符串包含检测算法。

5. 考虑使用 WebAssembly：对于性能要求极高的场景，可以考虑使用 WebAssembly 来实现字符串包含检测算法。WebAssembly 是一种高性能的二进制指令格式，可以在浏览器中以接近原生代码的速度运行。

如何处理特殊字符和编码问题？

在进行字符串包含检测时，需要特别注意特殊字符和编码问题。

1. 转义特殊字符：如果子字符串中包含正则表达式的特殊字符（例如 .、*、+、?、$、^、|、()、[]、{}），那么需要使用反斜杠 进行转义。

   const str = "Hello, world!";
   const regex = /world./; // 匹配 "world."
   const contains = regex.test(str); // false，因为字符串中没有 "world."
   
   const escapedRegex = /world./.replace(/([.?*+^$[]\(){}|])/g, "\$1"); // 安全转义
   const newRegex = new RegExp(escapedRegex);
   const newContains = newRegex.test(str); // still false

2. 处理 Unicode 字符：JavaScript 字符串使用 UTF-16 编码。在进行字符串包含检测时，需要确保子字符串和目标字符串使用相同的编码方式。如果字符串中包含 Unicode 字符，可能需要使用 String.prototype.normalize() 方法进行规范化。

   const str1 = "café";
   const str2 = "cafeu0301"; // 使用组合字符表示 é
   
   console.log(str1 === str2); // false
   
   const normalizedStr1 = str1.normalize();
   const normalizedStr2 = str2.normalize();
   
   console.log(normalizedStr1 === normalizedStr2); // true
   console.log(normalizedStr1.includes("cafe")); //false

3. 注意大小写和语种：默认情况下，字符串包含检测是区分大小写的。如果需要进行大小写不敏感的匹配，可以使用正则表达式的 i 标志，或者将字符串转换为统一的大小写形式。此外，不同语种的字符排序规则可能不同，需要根据具体情况进行处理。

如何在不同浏览器中兼容字符串包含检测？

虽然 includes() 方法是现代浏览器推荐的方法，但它在一些旧版本的浏览器中可能不受支持。为了确保代码在所有浏览器中都能正常运行，可以使用以下方法：

1. 使用 indexOf() 方法：indexOf() 方法在所有版本的浏览器中都受支持。

2. 使用 polyfill：可以使用 polyfill 来为旧版本的浏览器添加 includes() 方法的支持。例如，可以使用 core-js 库提供的 polyfill。

   // 引入 core-js 库
   import 'core-js/es/string/includes';
   
   const str = "Hello, world!";
   const contains = str.includes("world"); // 在所有浏览器中都能正常运行

3. 使用 Babel 进行转译：如果使用 Babel 等转译器，可以将代码转换为旧版本的 JavaScript，从而确保在所有浏览器中都能正常运行。

选择哪种方法取决于具体的需求和项目设置。如果只需要兼容一些较旧的浏览器，那么使用 indexOf() 方法可能就足够了。如果需要兼容非常旧的浏览器，或者需要使用 includes() 方法的全部功能，那么使用 polyfill 或 Babel 进行转译可能更合适。