js如何判斷字符串包含子串 字符串包含檢測的3種實(shí)用技巧

判斷JavaScript字符串是否包含子串，主要有三種方法：1.includes() 方法最直觀且推薦，返回布爾值表示是否包含指定子串；2.indexof() 方法通過返回索引或 -1 判斷是否包含，需額外比較操作；3.正則表達(dá)式 test() 方法更靈活，支持復(fù)雜模式匹配。選擇依據(jù)具體需求：簡單查找推薦 includes()，需要獲取索引或兼容舊瀏覽器用 indexof()，復(fù)雜匹配則使用正則表達(dá)式。性能優(yōu)化建議避免復(fù)制字符串、緩存正則表達(dá)式、優(yōu)先使用原生方法。處理特殊字符時(shí)需轉(zhuǎn)義，unicode 字符需規(guī)范化，大小寫不敏感可用 i 標(biāo)志或統(tǒng)一轉(zhuǎn)換大小寫。兼容性方面，舊瀏覽器可使用 indexof() 或 polyfill 實(shí)現(xiàn) includes() 支持。

判斷JavaScript字符串是否包含子串，核心在于使用字符串自帶的方法或者正則表達(dá)式，各有優(yōu)劣，選擇取決于具體場景和性能需求。

解決方案

JavaScript提供了多種方法來判斷字符串是否包含子串。主要有三種：includes()、indexOf() 和正則表達(dá)式的 test() 方法。

1. includes() 方法：這是最直觀和推薦的方法。它返回一個(gè)布爾值，表示字符串中是否包含指定的子字符串。

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

   includes() 方法還可以接受第二個(gè)參數(shù)，表示搜索的起始位置：

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

2. indexOf() 方法：這個(gè)方法返回子字符串在字符串中首次出現(xiàn)的索引。如果未找到子字符串，則返回 -1。

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

   indexOf() 方法也接受第二個(gè)參數(shù)，表示搜索的起始位置：

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

   使用 indexOf() 的一個(gè)潛在問題是，需要額外的比較操作 (!== -1) 來確定是否包含子字符串，這稍微增加了代碼的復(fù)雜性。

3. 正則表達(dá)式 test() 方法：這種方法更靈活，可以進(jìn)行更復(fù)雜的模式匹配。

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

   使用正則表達(dá)式的優(yōu)點(diǎn)是能夠進(jìn)行更復(fù)雜的匹配，例如忽略大小寫、匹配特定模式等。缺點(diǎn)是正則表達(dá)式的性能可能不如 includes() 或 indexOf()，尤其是在簡單字符串查找的情況下。而且，正則表達(dá)式的語法相對復(fù)雜，需要一定的學(xué)習(xí)成本。

includes()、indexOf() 和正則表達(dá)式，我該選擇哪個(gè)？

• 如果只需要簡單地判斷字符串是否包含子字符串，并且對性能要求不高，那么 includes() 是最佳選擇，因?yàn)樗啙嵰锥?/li>
• 如果需要獲取子字符串的索引位置，或者需要兼容不支持 includes() 的舊版本瀏覽器，那么 indexOf() 是一個(gè)不錯(cuò)的選擇。
• 如果需要進(jìn)行復(fù)雜的模式匹配，例如忽略大小寫、匹配多個(gè)可能的子字符串等，那么正則表達(dá)式是唯一的選擇。

如何優(yōu)化字符串包含檢測的性能？

字符串包含檢測的性能瓶頸通常出現(xiàn)在以下幾個(gè)方面：

• 字符串長度：字符串越長，搜索時(shí)間越長。
• 子字符串長度：子字符串越長，搜索時(shí)間也可能增加，但影響相對較小。
• 搜索頻率：如果需要頻繁進(jìn)行字符串包含檢測，那么性能優(yōu)化就顯得尤為重要。

以下是一些優(yōu)化建議：

1. 避免不必要的字符串復(fù)制：在進(jìn)行字符串操作之前，盡量避免創(chuàng)建不必要的字符串副本。例如，如果需要將多個(gè)字符串連接起來，可以使用數(shù)組的 join() 方法，而不是使用 + 運(yùn)算符進(jìn)行多次連接。

2. 使用正確的算法：對于簡單的字符串包含檢測，includes() 和 indexOf() 通常已經(jīng)足夠快。但是，對于更復(fù)雜的模式匹配，可能需要選擇更高效的正則表達(dá)式算法。

3. 緩存正則表達(dá)式：如果需要多次使用同一個(gè)正則表達(dá)式進(jìn)行匹配，那么應(yīng)該將正則表達(dá)式緩存起來，避免重復(fù)編譯。

   const regex = /pattern/; // 在函數(shù)外部定義正則表達(dá)式 function checkString(str) {   return regex.test(str); }

4. 利用瀏覽器優(yōu)化：現(xiàn)代瀏覽器對字符串操作進(jìn)行了大量的優(yōu)化。因此，盡量使用瀏覽器提供的原生方法，而不是自己實(shí)現(xiàn)字符串包含檢測算法。

5. 考慮使用 WebAssembly：對于性能要求極高的場景，可以考慮使用 WebAssembly 來實(shí)現(xiàn)字符串包含檢測算法。WebAssembly 是一種高性能的二進(jìn)制指令格式，可以在瀏覽器中以接近原生代碼的速度運(yùn)行。

如何處理特殊字符和編碼問題？

在進(jìn)行字符串包含檢測時(shí)，需要特別注意特殊字符和編碼問題。

1. 轉(zhuǎn)義特殊字符：如果子字符串中包含正則表達(dá)式的特殊字符（例如 .、*、+、?、$、^、|、()、[]、{}），那么需要使用反斜杠 進(jìn)行轉(zhuǎn)義。

   const str = "Hello, world!"; const regex = /world./; // 匹配 "world." const contains = regex.test(str); // false，因?yàn)樽址袥]有 "world."  const escapedRegex = /world./.replace(/([.?*+^$[](){}|])/g, "$1"); // 安全轉(zhuǎn)義 const newRegex = new RegExp(escapedRegex); const newContains = newRegex.test(str); // still false

2. 處理 Unicode 字符：JavaScript 字符串使用 UTF-16 編碼。在進(jìn)行字符串包含檢測時(shí)，需要確保子字符串和目標(biāo)字符串使用相同的編碼方式。如果字符串中包含 Unicode 字符，可能需要使用 String.prototype.normalize() 方法進(jìn)行規(guī)范化。

   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. 注意大小寫和語種：默認(rèn)情況下，字符串包含檢測是區(qū)分大小寫的。如果需要進(jìn)行大小寫不敏感的匹配，可以使用正則表達(dá)式的 i 標(biāo)志，或者將字符串轉(zhuǎn)換為統(tǒng)一的大小寫形式。此外，不同語種的字符排序規(guī)則可能不同，需要根據(jù)具體情況進(jìn)行處理。

如何在不同瀏覽器中兼容字符串包含檢測？

雖然 includes() 方法是現(xiàn)代瀏覽器推薦的方法，但它在一些舊版本的瀏覽器中可能不受支持。為了確保代碼在所有瀏覽器中都能正常運(yùn)行，可以使用以下方法：

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"); // 在所有瀏覽器中都能正常運(yùn)行

3. 使用 Babel 進(jìn)行轉(zhuǎn)譯：如果使用 Babel 等轉(zhuǎn)譯器，可以將代碼轉(zhuǎn)換為舊版本的 JavaScript，從而確保在所有瀏覽器中都能正常運(yùn)行。

選擇哪種方法取決于具體的需求和項(xiàng)目設(shè)置。如果只需要兼容一些較舊的瀏覽器，那么使用 indexOf() 方法可能就足夠了。如果需要兼容非常舊的瀏覽器，或者需要使用 includes() 方法的全部功能，那么使用 polyfill 或 Babel 進(jìn)行轉(zhuǎn)譯可能更合適。