JavaScript 检查字符串包含子串的三种方法：includes、indexOf 与正则表达式

在任何编程语言中，验证字符串是否包含特定的子字符串都是常见的开发任务。

例如，在构建在线游戏时，

开发者可能需要验证用户名中是否包含被禁止的词汇，以确保所有注册用户名符合游戏规则。

JavaScript字符串包含

在JavaScript中，主要有三种方法可用于检测字符串是否包含另一个字符或字符序列：

• includes（）
• indexOf（）
• 正则表达式（regex）

本教程将深入探讨如何利用这三种方法来检查JavaScript字符串是否包含另一个字符串。

includes（）

ES6中引入的JavaScript includes() 方法用于确定字符串是否包含传递给该方法的字符。如果字符串中包含指定的字符，该方法将返回“true”。

如果指定的字符串不包含要查找的字符，includes() 将返回“false”。

includes() 方法的语法如下：

string.includes(word);

其中，“字符串”代表我们要进行搜索的原始字符串，“word”代表我们要查找的目标字符或子串。

以下是一个实际使用 includes() 方法的示例：

let example = "Example String!";
let ourSubstring = "Example";
 
if (example.includes(ourSubstring)) {
    console.log("The word Example is in the string.");
} else {
    console.log("The word Example is not in the string.");
}

我们的代码输出结果为：字符串中包含示例字。

在前两行代码中，我们声明了两个JavaScript变量。第一个变量是我们要搜索的原始字符串，第二个变量是我们要在原始字符串中查找的子字符串。换句话说，我们是在检查第一个变量是否包含第二个变量的内容。

接下来，我们使用 if 语句来评估“example”变量是否包含“ourSubstring”变量的内容。

如果“example”中包含“Example”一词，则条件判断为“true”。这意味着将执行 if 语句主体中的 console.log() 语句。否则，将执行 else 语句块。

• includes() 方法是区分大小写的，因此，如果我们更改子字符串的大小写，将返回“false”。
• includes() 的第二个参数
• includes() 方法允许指定第二个参数。该参数是一个索引号，指示 includes() 应该从该索引位置开始搜索子字符串。由于列表采用从零开始的索引方式，第一个字符的索引为“0”，第二个字符的索引为“1”，依此类推。

让我们检查一下单词“Example”是否出现在字符串索引位置7之后：

let example = "Example String!";
let ourSubstring = "Example";
 
if (example.includes(ourSubstring, 7)) {
    console.log("The word Example is in the string.");
} else {
    console.log("The word Example is not in the string");
} 

includes() 方法返回字符串开始的索引位置。我们的代码输出结果为：“示例单词不在字符串中。” 尽管我们的字符串中确实包含单词“Example”，但该单词出现在索引值“7”之前，该值是“Example”和“String！”之间的空格。

indexOf（）

与 includes() 类似，JavaScript indexOf() 方法也用于检查一个字符串是否包含另一个字符串。但这两个函数的输出结果不同。

当我们使用 includes() 方法时，该方法返回一个布尔值：true 或 false。而 indexOf() 返回子字符串的起始索引位置。如果字符串不包含子字符串，我们将得到“-1”。

让我们看一下该方法的语法：

string.indexOf(word);

就像在 includes() 示例中一样，“字符串”指的是我们进行搜索的原始字符串，“word”是我们要搜索的短语或字符。

以下是JavaScript中 indexOf() 的一个示例：

let example = "Example String!";
let ourSubstring = "Example";
 
if (example.indexOf(ourSubstring) != -1) {
    console.log("The word Example is in the string.");
} else {
    console.log("The word Example is not in the string.");
} 

我们的代码输出结果为：字符串中包含示例字。与上一个示例一样，我们使用了 if 语句。根据我们的字符串是否包含子字符串，此语句向控制台显示一条特定消息。

我们检查 indexOf() 方法是否不返回 -1。如果是这样，则运行 else 语句。-1 表示找不到我们的字符串。否则，将执行 if 语句中的代码。

与 includes() 方法一样，indexOf() 也是区分大小写的。如果我们希望搜索从某个索引值开始，则可以使用另一个参数：

let example = "Example String!";
let ourSubstring = "Example";
 
if (example.indexOf(ourSubstring, 7) != -1) {
    console.log("The word Example is in the string.");
} else {
    console.log("The word Example is not in the string.");
} 

由于找不到从索引值7开始的完全匹配，因此我们的代码返回 -1。

正则表达式

我们还可以利用JavaScript正则表达式（或regex）来检查字符串是否包含子字符串。正则表达式由于其灵活性而非常有用：您可以对搜索内容和位置进行大量控制。

我们可以使用 RegExp.test() 方法检查字符串是否包含子字符串。

以下是一个例子：

let str = "Example String!"; 
/Example/.test(str);

我们的代码输出结果为 true。这是因为“JavaScript”在我们的“example”字符串中。

正则表达式功能强大。但正则表达式的缺点是运行速度可能会变慢，具体取决于您使用的规则。添加到正则表达式规则中的语句越多，搜索所需的时间就越长。

如果您执行的是简单搜索并且不需要高级字符串函数，则使用 includes() 或 indexOf() 可能是一种更好的方法。不建议 RegExp.test() 方法用于尚未了解 Regex 的初学者。

如果您想了解有关正则表达式的更多信息并测试正则表达式，请查看 RegExr。

结论

在本教程中，我们讨论了JavaScript中字符串的基础。之后，我们讨论了三种检查字符串是否包含JavaScript中子字符串的方法：使用 includes()、indexOf() 和 regex。

includes() 方法可以说是检查字符串是否包含子字符串的最常用方法。这是因为方法的名称是字面意思。显然 includes() 允许您在另一个字符串中搜索一个字符串。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。