JavaScript >> Javascript 文檔 >  >> Tags >> string

JavaScript:檢查字符串是否包含子字符串

許多編程語言中的一個常見操作是檢查一個字符串是否包含另一個字符串。雖然這是一項簡單而常見的任務,但方法名稱通常因編程語言而異。例如,以下是用於在各種語言中實現此目的的方法的小示例:

  • Java:String.contains() , String.indexOf() 等。
  • Python:in 運算符,String.index() , String.find()
  • 去:strings.Contains()
  • Ruby:string.include?

你明白了。有上百萬種方法可以做到這一點,而且似乎每種語言的實現方式都不同。

無論如何,讓我們看看在 JavaScript 中檢查字符串是否包含子字符串的幾種方法。

注意 :下面顯示的前兩種方法也適用於數組,它告訴您數組是否包含給定值(或 indexOf() 的索引 )。閱讀本文時請記住這一點,因為它可能會幫助您處理類似的用例。

String.includes() 方法

這種方法是在 ES6 中引入的,通常是簡單用例的首選方法。如果您需要做的只是獲取一個布爾值來指示子字符串是否在另一個字符串中,那麼這就是您想要使用的。

它的工作原理是這樣的:

> let str = 'stackabuse';
> let substr = 'stack';
> str.includes(substr);
true

如您所見,由於字符串“stack”是“stackabuse”的子字符串,因此返回了一個布爾值。

這是區分大小寫的搜索,因此以下內容將不匹配子字符串:

> let str = 'StackAbuse';
> let substr = 'stack';
> str.includes(substr);
false

雖然這對於大多數用例來說已經足夠了,但 includes() 方法還提供了另一個可能對您有用的選項。可以提供第二個參數,告訴方法從哪個索引開始搜索。因此,如果您知道子字符串不包含在前 50 個字符中(或者您只是不希望它與這些字符匹配),那麼您可以使用如下方法:

str.includes(substr, 50);

下方的偏移量 0 只是從索引 0 開始搜索,並且偏移量大於 string.length 返回 false 因為搜索從 string.length 開始 .

String.indexOf() 方法

String.indexOf() 方法很像前面的 includes() 方法(適用於 includes() 的 polyfill 以及),但唯一的區別是返回值。它實際上不是返回一個指示子字符串存在的布爾值,而是返回子字符串的索引位置,如果不存在,則返回 -1。

舉個例子:

> let str = 'stackabuse';
> let substr = 'abuse';
> str.indexOf(substr);
5
> str.indexOf('apple');
-1

如您所見,該方法返回子字符串從 0 開始的索引位置,當未找到子字符串時返回 -1。

就像 includes() 方法,indexOf() 方法區分大小寫 還支持offset參數:

> let str = 'StackAbuse';
> let substr = 'abuse';
> str.indexOf(substr);
-1
> str.indexOf('Abu', 3);
5
> str.indexOf('Abu', 6);
-1

當您需要知道子字符串的確切位置時,此方法很有用,但是,僅將其用作布爾值時,它就不那麼乾淨了:

let str = 'stackabuse';
let substr = 'stack';

if (str.indexOf(substr) > -1) {
    console.log('Found the substring!');
}

在這種情況下,您應該使用 includes() 方法,因為它更容易出錯。

正則表達式

檢查子字符串的更有用和強大的方法之一是使用正則表達式或正則表達式。使用正則表達式來完成這樣的任務比以前只能檢查常量字符串的方法具有更大的靈活性。雖然正則表達式的主題太大,無法在此處完全涵蓋,但我們至少可以看一下我們用例的一些有用功能。

可以使用 RegExp.test() 來使用正則表達式檢查字符串中的子字符串 方法:

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

> let str = 'stackabuse';
> /stack/.test(str);
true

與前兩種方法不同,我們現在可以使用 i 進行不區分大小寫的搜索 標誌:

> let str = 'StackAbuse';
> /stack/i.test(str);
true

作為一個更複雜的示例,假設您想查看一個字符串是否包含郵政編碼(5 位郵政編碼),但您並不真正關心字符串中的郵政編碼。這類問題不能用includes()解決 或 indexOf() .但是使用正則表達式,我們可以很容易地對此進行測試:

> let str = 'My zip code is 90210';
> /\d{5}/.test(str);
true
> str = 'My address is 123 Fake St.';
> /\d{5}/.test(str);
false

雖然 JavaScript 不一定以其速度而聞名,但請記住,這將比像 includes() 這樣更簡單的方法慢 ,所以你應該只將它用於無法用更簡單的解決方案解決的更複雜的情況。

結論

操作和檢查字符串是許多編程語言中最常見的任務之一,尤其是面向用戶的代碼。由於許多不同的原因,例如驗證字符串,您需要檢查字符串是否包含子字符串。在本文中,我們看到了 JavaScript 提供的幾種不同方法,它們可以讓您完全做到這一點。


Tutorial JavaScript 教程
  1. 使用自定義鉤子訪問其他頁面時在 React 中保存滾動狀態

  2. 作為開發人員成長的 7 個小技巧

  3. 你還在使用var嗎?如果是,為什麼?

  4. 12 個 Solarized 主題圖中解釋了智能、可擴展的構建框架

  5. 如何使用 esbuild 構建 Node API

  6. 使用帶有 Urql 的 React Hooks 編寫 GraphQL Mutation

  7. 在 React 中使用 Xstate 和輸入

  1. 網站沒有在 express() 上運行,需要幫助。

  2. npm包管理器簡介

  3. 使用 Javascript 刪除所有項目後如何顯示“購物車為空”?

  4. 不推薦使用的 HTML 元素(以及改用的元素)

  5. 我的計算器怎麼樣。我的計算器應用程序需要一些反饋和改進。

  6. 使用 Angular 構建 Markdown 編輯器

  7. 如何在數組中存儲對變量的引用?

  1. JavaScript 幕後:作用域和作用域鏈

  2. 如何在 React 中創建帶有分頁的表格

  3. Alpine.js 中的動態內容渲染

  4. 快速入門:使用 Sagas 設置 React Redux