tags: JavaScript Front-End

【學習筆記】JavaScript 尋找字串的方法：includes/indexOf/search/match

• 【學習筆記】JavaScript 尋找字串的方法：includes/indexOf/search/match
  • String.prototype.search( )：檢測字串是否包含，有的話回傳 index，否則回傳 -1
  • String.prototype.indexOf()：檢測字串是否包含，有的話回傳 index，否則回傳 -1
  • String.prototype.match()：尋找並取出內容，有的話以陣列回傳，否則回傳 null
  • String.prototype.includes()：判斷字串中是否包含指定字串
  • 小結
  • Reference

Photo by Mick Haupt on Unsplash

在處理資料時，查找字串是一種常見的操作，JavaScript 提供不同的方法來搜索字串。其中，最常用的方法包括：search、indexOf、includes 和 match，能夠辨別字串裡是否有想要查找的文字：

• String.prototype.search( )
• String.prototype.indexOf( )
• String.prototype.match()
• String.prototype.includes()

接下來會比較這四種方法的不同之處，以及使用範例。

---

String.prototype.search( )：檢測字串是否包含，有的話回傳 index，否則回傳 -1

• 搜索指定字符串，並返回匹配字串第一個字的索引值
• 若找不到，則返回 -1
• 可支援正則表達式

search(regexp)

關於正則表達式的用法，可參考這篇筆記：【學習筆記】JavaScript：Regex 正則表達式。

使用範例：

• 字串符匹配

let str = "Hello world!";
let position = str.search("world");

console.log(position);   // 6

• 正則表達式匹配

let str = "Say hello to Hello World!";
let rule1 = str.search(/[A-Z]/);    // 符合大寫字母 A 到 Z
let rule2 = str.search(/Hello/);    // 符合 Hello
let rule3 = str.search(/Hello/i);   // i 代表不區分大小寫

console.log(rule1);  // 0
console.log(rule2);  // 13
console.log(rule3);  // 4

String.prototype.indexOf()：檢測字串是否包含，有的話回傳 index，否則回傳 -1

• 搜索指定字符串，並返回匹配字串第一個字的索引值
• 若沒有找到，則返回 -1
• 第二個參數 position 為選填屬性，代表從哪個 index 找起
• 與 search() 方法類似，差別在於 indexOf() 不支援正則表達式

indexOf(searchString, position)

使用範例：

• 找特定字符的 index

let str = "Say hello to hello world!";
let position1 = str.indexOf("hello");
let position2 = str.indexOf("hello", 10);
let position3 = str.indexOf("Hello", 10);
let position4 = str.indexOf("zzz");

console.log(position1);    // 4
console.log(position2);    // 13
console.log(position3);    // -1
console.log(position4);    // -1

String.prototype.match()：尋找並取出內容，有的話以陣列回傳，否則回傳 null

• 搜索指定字符串，並返回一個或多個與指定值匹配的數組
• 若找不到則返回 null
• 支援正則表達式

string.match(searchvalue)
string.match(regexp)

使用範例：

• 字符串匹配

let str = "hello world";
let result1 = str.match("hello");
let result2 = str.match("Hello");

console.log(result1);  // ['hello', index: 0, input: 'hello world', groups: undefined]
console.log(result2);  // null

• 正規表達式匹配：需注意要加上 g 標誌，才會返回匹配的所有結果

找指定字串：

let str = "Say hello to hello World!";
let result1 = str.match(/hello/);
let result2 = str.match(/hello/g);

console.log(result1);  // ['hello', index: 4, input: 'Say hello to hello World!', groups: undefined]
console.log(result2);  // ['hello', 'hello']

找大寫字母：

const paragraph = 'Hello, I am fine. Thank you.';
const regex = /[A-Z]/;
const globalReg = /[A-Z]/g;

console.log(paragraph.match(regex));      // ['H', index: 0, input: 'Hello, I am fine. Thank you.', groups: undefined]
console.log(paragraph.match(globalReg));  // ["H", "I", "T"]

String.prototype.includes()：判斷字串中是否包含指定字串

• 找到匹配字串返回 true；否則返回 flase
• 不支援正則表達式

string.includes(searchvalue, start)

使用範例：

let str = "Hello world!";
let isPresent1 = str.includes("world");
let isPresent2 = str.includes("zzz");

console.log(isPresent1); // true
console.log(isPresent2); // false

小結

過去曾整理過陣列遍歷的相關筆記：

• 【學習筆記】JavaScript 的陣列遍歷（ㄧ）：for/for…of/for…in/forEach
• 【學習筆記】JavaScript 的陣列遍歷（二）：forEach/map/filter/every/some/reduce

專案中時常需要去搜尋特定字串，來達成特定目的。翻找筆記時，才發現自己竟然還沒有整理過這幾個 JavaScript 提供的方法的差異。

也藉由這個機會，又好好重新複習正則表達式的一些觀念，雖然很多時候是需要用到的時候再查就好，但果然原生的底子還是基礎中的基礎。

此外，也體驗了最近正夯的 ChatGPT，給一段關鍵字寫出來的文章，差不多就完成了八七分架構，只需要再多補充一些觀念，一篇筆記就熱騰騰的誕生了ಠ_ಠ

雖然這項功能方便又快速，結果卻不一定 100% 正確，有時也會出現一些瞎掰的，甚至與事實相差甚遠的回答；因此該如何善用這項工具，辨別結果並實際應用在工作上的開發、測試、寫文件等等，想必是使用者需要學習的課題吧。

Reference

• 認識 search、indexOf、includes 三種搜尋字串的相關方法 | by Lai | UnaLai | Medium
• <JavaScript>字串的處理方式. 覺得自己每次都忘記字串、物件、陣列的處理方式，決定要來整理這些的用法。 | by 拉拉 | 拉拉的程式筆記 | Medium