前端新米

Heidi's Blog

0%

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

發表於 更新於 分類於
文章字數： 3.2k 所需閱讀時間 ≈ 3 分鐘

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
  • 可支援正則表達式
1
search(regexp)

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

使用範例：

  • 字串符匹配
1
2
3
4
let str = "Hello world!";
let position = str.search("world");

console.log(position);   // 6
  • 正則表達式匹配
1
2
3
4
5
6
7
8
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() 不支援正則表達式
1
indexOf(searchString, position)

使用範例：

  • 找特定字符的 index
1
2
3
4
5
6
7
8
9
10
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
  • 支援正則表達式
1
2
string.match(searchvalue)
string.match(regexp)

使用範例：

  • 字符串匹配
1
2
3
4
5
6
7
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 標誌，才會返回匹配的所有結果

找指定字串：

1
2
3
4
5
6
7
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']

找大寫字母：

1
2
3
4
5
6
7

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
  • 不支援正則表達式
1
string.includes(searchvalue, start)

使用範例：

1
2
3
4
5
6
let str = "Hello world!";
let isPresent1 = str.includes("world");
let isPresent2 = str.includes("zzz");

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

小結

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

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

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

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

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

Reference