JavaScript 查找字符串

在 JavaScript 中，如果想要查找字符串中是否存在某个子串，常用的方法有以下 3 种。

indexOf()
search()
includes()

使用 indexOf() 查找字符串

在 JavaScript 中，我们可以使用 indexOf() 方法来从字符串的开头（索引 0）开始查找，然后返回 “第一次” 出现的索引。如果指定子串不存在，则返回 -1。

也就是说，我们只需要判断 indexOf() 方法返回值是否不等于 -1，就可以判断字符串中是否包含指定子串了。

语法：

str.indexOf(searchValue, fromIndex)

说明：

indexOf() 方法接收以下 2 个参数。

searchValue（可选）：表示想要查找的子串。
fromIndex（可选）：表示查找的开始下标，默认值为 0。

示例 1：indexOf() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const str = "apple banana cherry apple";
        console.log(str.indexOf("apple"));
        console.log(str.indexOf("banana"));
    </script>
</body>
</html>

运行结果如下。

0
6

分析：

虽然字符串中包含两个 "apple"，但 str.indexOf("apple") 只会返回第一个 "apple" 的开始下标，也就是 0。

提示:

关于 indexOf() 的更详细用法，另请参阅：JavaScript 字符串 indexOf() 方法。
与 indexOf() 类似的还有一个 lastIndexOf() 方法。只不过 lastIndexOf() 方法用于返回指定子串在字符串中 “最后一次” 出现的索引。

使用 search() 查找字符串

在 JavaScript 中，search() 方法专门用于执行 “正则表达式” 的搜索，它会返回第一次匹配项的索引。如果不存在，则返回 -1。

也就是说，我们只需要判断 search() 方法返回值是否为 -1，就可以判断字符串中是否包含指定子串了。

语法：

str.search(pattern)

说明：

search() 方法接收单个参数。

pattern（必选）：是一个字符串或一个正则表达式。

示例 2：search() 的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const str = "My number is 020-666666 or 020-888888";
        const result = str.search(/\d{3}-\d{6}/);
        console.log(result);
    </script>
</body>
</html>

运行结果如下。

分析：

虽然 str 存在两个匹配项，也就是 “020-666666” 和 “020-888888”，但 search() 方法只会返回第一个匹配项的索引。

search() 方法的定位其实非常明确，它就是用于判断字符串是否存在匹配项（通过返回值是否为 -1 来判断），而不是要找出该匹配项是什么。如果想要找出所有匹配项，我们应该使用的是 match() 或 matchAll()。

提示: 关于 search() 的更详细用法，另请参阅：JavaScript 字符串 search() 方法。

使用 includes() 查找字符串

如果我们只是希望简单判断一个字符串是否包含某个子串，而不需要知道该子串的具体位置，此时最简单的就是使用 includes() 方法来查找。

语法：

str.includes(searchValue, fromIndex)

说明：

includes() 方法接收以下 2 个参数。

searchValue（必选）：表示你要查找的子串。
fromIndex（可选）：表示查找的开始下标，默认值为 0。

includes() 方法会返回一个布尔值。如果能找到，则返回 true；如果找不到，则返回 false。

示例 3：includes() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const str = "logo.jpg";
        console.log(str.includes("jpg"));
        console.log(str.includes("JPG"));
    </script>
</body>
</html>

运行结果如下。

true
false

分析：

includes() 方法会严格区分大小写，因此 str.includes("JPG") 返回的结果为 false。

提示: 关于 includes() 的更详细用法，另请参阅：JavaScript 字符串 includes() 方法。