freeCodeCamp 前端开发教程：JavaScript 字符串包含检测方法详解

freeCodeCamp 前端开发教程：JavaScript 字符串包含检测方法详解

freeCodeCamp freeCodeCamp.org的开源代码库和课程。免费学习编程。 项目地址: https://gitcode.com/gh_mirrors/fr/freeCodeCamp

前言

在 JavaScript 开发中，字符串处理是最基础也是最常用的操作之一。判断一个字符串是否包含特定子字符串是开发中经常遇到的需求，比如表单验证、关键词过滤等场景。本文将详细介绍如何使用 includes() 方法进行字符串包含检测。

includes() 方法基础

includes() 是 JavaScript 字符串对象的内置方法，用于检测一个字符串是否包含指定的子字符串。

基本语法

string.includes(searchValue[, position])

• searchValue：要搜索的子字符串
• position（可选）：从字符串的哪个位置开始搜索（默认为0）

返回值

• 如果找到子字符串，返回 true
• 如果未找到子字符串，返回 false

基础示例

const greeting = "Hello, world!";
console.log(greeting.includes("world"));  // 输出: true
console.log(greeting.includes("World"));  // 输出: false

重要特性

1. 区分大小写

includes() 方法是大小写敏感的，这意味着它会严格匹配字母的大小写：

const text = "JavaScript is fun";
console.log(text.includes("javascript"));  // 输出: false
console.log(text.includes("JavaScript")); // 输出: true

2. 指定搜索起始位置

可以通过第二个参数指定搜索的起始位置：

const sentence = "The quick brown fox jumps over the lazy dog";
console.log(sentence.includes("fox", 20));  // 输出: false
console.log(sentence.includes("fox", 10));  // 输出: true

3. 空字符串处理

当搜索空字符串时，includes() 总是返回 true：

const str = "Hello";
console.log(str.includes(""));  // 输出: true

实际应用场景

1. 表单验证

function validateEmail(email) {
  return email.includes("@") && email.includes(".");
}

2. 关键词过滤

function containsBadWord(text, badWords) {
  return badWords.some(word => text.includes(word));
}

3. 路径检查

function isImageFile(filename) {
  return [".jpg", ".png", ".gif"].some(ext => filename.includes(ext));
}

与其他方法的比较

includes() vs indexOf()

• includes() 返回布尔值，更直观
• indexOf() 返回子字符串的位置（未找到返回-1）
• includes() 可以正确处理 NaN 值的查找

const arr = [NaN];
console.log(arr.indexOf(NaN));     // 输出: -1
console.log(arr.includes(NaN));   // 输出: true

includes() vs search()

• search() 接受正则表达式作为参数
• includes() 只接受字符串
• search() 返回位置索引而非布尔值

注意事项

1. 浏览器兼容性：虽然现代浏览器都支持 includes()，但在非常旧的浏览器（如IE11及以下）中不可用。如果需要支持旧浏览器，可以使用 indexOf() 作为替代：

// 兼容性写法
if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    return this.indexOf(search, start) !== -1;
  };
}

2. 性能考虑：对于简单的子字符串查找，includes() 和 indexOf() 性能相当。但在需要频繁检查多个子字符串时，可以考虑使用正则表达式或更复杂的算法。

3. Unicode处理：includes() 正确处理Unicode字符，包括代理对：

const emoji = "😊";
console.log(emoji.includes("😊"));  // 输出: true

总结

includes() 方法是JavaScript中检查字符串包含关系的最简单直接的方式。它语法简洁，语义明确，是日常开发中的实用工具。记住它的特性（大小写敏感、可指定起始位置等），可以帮助你更高效地处理字符串操作任务。

对于更复杂的字符串操作需求，可以结合使用 indexOf()、search()、match() 等方法，或者使用正则表达式来实现更强大的模式匹配功能。

freeCodeCamp freeCodeCamp.org的开源代码库和课程。免费学习编程。 项目地址: https://gitcode.com/gh_mirrors/fr/freeCodeCamp