---
# System prepended metadata

title: 【學習筆記】JavaScript 尋找字串的方法：includes/indexOf/search/match
tags: [JavaScript, Front-End]

---

###### tags: `JavaScript` `Front-End`
# 【學習筆記】JavaScript 尋找字串的方法：includes/indexOf/search/match

[toc]

![](https://i.imgur.com/nZfxv6r.jpg)

> Photo by <a href="https://unsplash.com/@rocinante_11?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mick Haupt</a> on <a href="https://unsplash.com/photos/eQ2Z9ay9Wws?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  
在處理資料時，查找字串是一種常見的操作，JavaScript 提供不同的方法來搜索字串。其中，最常用的方法包括：search、indexOf、includes 和 match，能夠辨別字串裡是否有想要查找的文字：

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

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

---

## [String.prototype.search( )](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/search)：檢測字串是否包含，有的話回傳 index，否則回傳 -1

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

```jsx
search(regexp)
```

> 關於正則表達式的用法，可參考這篇筆記：[【學習筆記】JavaScript：Regex 正則表達式](https://heidiliu2020.github.io/regex/)。

使用範例：

- 字串符匹配

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

console.log(position);   // 6
```

- 正則表達式匹配

```jsx
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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)**：**檢測字串是否包含，有的話回傳 index，否則回傳 -1**

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

```jsx
indexOf(searchString, position)
```

使用範例：

- 找特定字符的 index

```jsx
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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match)：**尋找並取出內容，有的話以陣列回傳，否則回傳 null**

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

```jsx
string.match(searchvalue)
string.match(regexp)
```

使用範例：

- 字符串匹配

```jsx
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` 標誌，才會返回匹配的所有結果

找指定字串：

```jsx
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']

```

找大寫字母：

```jsx

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()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/includes)：判斷字串中是否包含指定字串

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

```jsx
string.includes(searchvalue, start)
```

使用範例：

```jsx
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](https://heidiliu2020.github.io/javascript-for-loop/)
- [【學習筆記】JavaScript 的陣列遍歷（二）：forEach/map/filter/every/some/reduce](https://heidiliu2020.github.io/javascript-native-array/)

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

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

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

![](https://i.imgur.com/Fd2VwfC.png)

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

## Reference

- [認識 search、indexOf、includes 三種搜尋字串的相關方法 | by Lai | UnaLai | Medium](https://medium.com/unalai/%E8%AA%8D%E8%AD%98-search-indexof-includes-%E4%B8%89%E7%A8%AE%E6%90%9C%E5%B0%8B%E5%AD%97%E4%B8%B2%E7%9A%84%E7%9B%B8%E9%97%9C%E6%96%B9%E6%B3%95-704856176952)
- [<JavaScript>字串的處理方式. 覺得自己每次都忘記字串、物件、陣列的處理方式，決定要來整理這些的用法。 | by 拉拉 | 拉拉的程式筆記 | Medium](https://medium.com/%E6%8B%89%E6%8B%89%E7%9A%84%E7%A8%8B%E5%BC%8F%E7%AD%86%E8%A8%98/%E5%AD%97%E4%B8%B2%E7%9A%84%E8%99%95%E7%90%86%E6%96%B9%E5%BC%8F-793037c1182)