JavaScript includes() 方法:輕鬆查詢字串與陣列入門指南

更新日期: 2024 年 10 月 31 日

在 JavaScript 中,字串和陣列處理是非常常見的任務,尤其是在檢查字串或陣列中是否包含某些特定的字詞或項目。

includes() 是一個簡單易用的方法,可以幫助我們快速完成這項任務。

這篇文章將介紹 includes() 的基本用法,以及它在字串和陣列中的應用,讓你輕鬆上手。


什麼是 includes() 方法?

includes() 是 JavaScript 中的內建方法,可以用來檢查字串或陣列中是否包含指定的內容。

它的語法簡單明瞭,回傳一個布林值(truefalse),表示目標字串或陣列是否包含該項目。

基本語法

stringOrArray.includes(searchElement, position)
  • searchElement:必需,表示要查詢的子字串或項目。
  • position:可選,指定從哪個索引位置開始查詢(預設為 0,僅適用於字串)。

字串中的 includes() 用法

在字串中使用 includes() 方法可以檢查某段文字中是否包含特定字詞。

這對於搜尋和篩選操作非常有用:

const sentence = "JavaScript 是一種強大的程式語言";

// 檢查字串是否包含 "強大"
const result = sentence.includes("強大");
console.log(result); // 輸出:true

// 檢查字串是否包含 "簡單"
console.log(sentence.includes("簡單")); // 輸出:false

在這個範例中,sentence 字串包含 “強大”,所以 includes("強大") 回傳 true

若查詢的字串不存在,則會回傳 false

陣列中的 includes() 用法

includes() 也可以用來檢查陣列中是否包含特定項目,這在搜尋和篩選特定項目時尤其有用:

const fruits = ["apple", "banana", "cherry"];

// 檢查陣列是否包含 "banana"
console.log(fruits.includes("banana")); // 輸出:true

// 檢查陣列是否包含 "grape"
console.log(fruits.includes("grape")); // 輸出:false

在這裡,includes() 檢查陣列 fruits 是否包含某個項目,並回傳 truefalse

無論是對字串還是陣列,includes() 的操作都是相似的,簡單而直觀。


字串與陣列的關係

在 JavaScript 中,字串可以被視為一個「字元的陣列」,因為字串實際上是由一連串字元組成的。

這意味著,我們可以像操作陣列一樣對字串使用一些相似的功能。

例如,字串的每個字元都可以用索引來存取(如 string[0] 代表字串的第一個字元)。

因此,includes() 能夠同時應用在字串和陣列上,使這個方法的操作更為一致。

position 參數的作用

對於字串來說,includes() 方法的第二個參數 position 用來指定從哪個索引位置開始查詢。

這個參數能夠更靈活地控制查詢範圍:

const text = "JavaScript 是一種強大的程式語言,程式語言可以用來開發各種應用";

// 從索引 15 開始查找 "程式語言"
console.log(text.includes("程式語言", 15)); // 輸出:true

// 從索引 30 開始查找 "程式語言"
console.log(text.includes("程式語言", 30)); // 輸出:false

在這個範例中,若從索引 15 開始查找,includes() 能找到 “程式語言” 並回傳 true;若從索引 30 開始,則回傳 false,因為查詢範圍內不再包含該字串。


什麼時候使用 includes()

includes() 方法在許多情境下都十分實用,特別是在以下場合:

  1. 簡單字串查找:檢查字串中是否包含特定字詞,例如搜尋產品描述中是否有 “折扣” 字樣。
   const description = "這款產品目前享有 20% 折扣!";
   console.log(description.includes("折扣")); // 輸出:true
  1. 輸入檢查:檢查使用者輸入是否包含特定敏感字或無效字符。
   const userInput = "這是一個有效的輸入";
   if (userInput.includes("不當字詞")) {
       console.log("請勿使用不當字詞");
   } else {
       console.log("輸入有效");
   }
  1. 導航或篩選:在陣列中使用 filter 搭配 includes() 來篩選包含特定關鍵字的元素。
   const items = ["JavaScript", "Python", "Java", "C++", "Ruby"];
   const searchTerm = "Java";
   const filteredItems = items.filter(item => item.includes(searchTerm));
   console.log(filteredItems); // 輸出:[ "JavaScript", "Java" ]

使用 includes() 注意事項

  1. 區分大小寫includes() 是區分大小寫的。這意味著 “JavaScript” 和 “javascript” 是不同的字串,因此查詢時需特別注意大小寫問題。
   const example = "Hello World";
   console.log(example.includes("hello")); // 輸出:false

若不需要區分大小寫,可以使用 toLowerCase()toUpperCase() 來統一字串格式。

   const example = "Hello World";
   console.log(example.toLowerCase().includes("hello")); // 輸出:true
  1. 只能查詢字串或單一項目includes() 對字串僅支援查詢子字串,對陣列僅支援查詢單一項目,若要查詢非字串的資料,需要先轉換格式。

結語

includes() 是一個功能強大、應用靈活的方法,適用於查詢字串和陣列中的內容。

無論是處理使用者輸入、篩選資料,還是進行其他檢查操作,includes() 都提供了一個簡單而高效的解決方案。

希望這篇文章能幫助你更好地理解和使用 includes() 方法!

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *