JavaScript字符串包含问题

 更新时间:2022年11月30日 10:39:16   作者:allway2  
这篇文章主要介绍了JavaScript字符串包含问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

在任何编程语言中,检查字符串是否包含子字符串都是常见的任务。

例如,假设您正在构建在线游戏。

您可能需要检查用户名是否包含禁止使用的短语,以确保所有用户名都适合您的游戏。

JavaScript字符串包含

有三种方法可检查JavaScript字符串是否包含另一个字符或字符序列:

  • includes()
  • indexOf()
  • 正则表达式(regex)

在本教程中,我们将讨论可以使用这三种方法来检查JavaScript字符串是否包含另一个字符串的方法。

includes() 

ES6中引入的JavaScript include()方法确定字符串是否包含您传递给该方法的字符。如果字符串包含某些字符,则该方法将返回“ true”。

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

includes()方法的语法为:

string.includes(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”变量的内容。

如果“示例”中包含“示例”一词,则我们的陈述为“真”。这意味着将运行“ 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()

像include()一样,JavaScript indexOf()方法检查一个字符串是否包含另一个字符串。这两个函数的输出不同。

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

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

string.indexOf(word);

就像在我们的include()示例中一样,“字符串”指的是我们通过其搜索的值。“单词”是我们要搜索的短语或字符。

这是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”语句中的代码。

像include()方法一样,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”在我们的“示例”字符串中。

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

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

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

结论

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

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

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

相关文章

  • 动态加载JavaScript文件的两种方法

    动态加载JavaScript文件的两种方法

    第一种利用ajax方式,第二种是动静创建一个script标签,配置其src属性,经过把script标签拔出到页面head来加载js,感乐趣的网友可以看下
    2016-04-04
  • 微信小程序利用Canvas绘制图片和竖排文字详解

    微信小程序利用Canvas绘制图片和竖排文字详解

    这篇文章主要介绍了微信小程序利用Canvas绘制图片和竖排文字详解,合成图片应该按照 Canvas 的文档来做都没什么问题,主要是有个竖排文字的需求,这里和大家分享一下,需要的朋友可以参考下
    2019-06-06
  • JS实现简单加减购物车效果

    JS实现简单加减购物车效果

    这篇文章主要为大家详细介绍了JS实现简单加减购物车效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JavaScript面向对象实现贪吃蛇游戏

    JavaScript面向对象实现贪吃蛇游戏

    这篇文章主要为大家详细介绍了JavaScript面向对象实现贪吃蛇游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • JS实现黑色大气的二级导航菜单效果

    JS实现黑色大气的二级导航菜单效果

    这篇文章主要介绍了JS实现黑色大气的二级导航菜单效果,具有延迟响应鼠标事件显示切换效果的功能,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • js原型链原理看图说明

    js原型链原理看图说明

    任何一个对象都有一个prototype的属性,在js中可以把它记为:__proto__
    2012-07-07
  • 深入理解JavaScript的事件执行机制

    深入理解JavaScript的事件执行机制

    本文主要介绍了JavaScript的事件执行机制,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 原生JS实现实时钟表

    原生JS实现实时钟表

    这篇文章主要为大家详细介绍了原生JS实现实时钟表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Echarts中常用的参数总结及参数自定义示例代码

    Echarts中常用的参数总结及参数自定义示例代码

    Echarts中参数的配置功能很强大,对任何一项的配置都很细致,下面这篇文章主要给大家介绍了关于Echarts中常用的参数总结及参数自定义的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • javascript密码强度校验代码(两种方法)

    javascript密码强度校验代码(两种方法)

    为了保证网站个人信息的安全,很多网站在注册页面都设置密码强度这项,用javascript如何实现密码强度校验代码呢?下面小编给大家整理了两种方法使用javascript密码强度校验代码,有需要的朋友可以参考下
    2015-08-08

最新评论