数组indexOf与includes方法_javascript基础语法 - 技术文章

JavaScript 字符串处理的利器:indexOf、includes等方法详解

在前端开发中，字符串处理是不可或缺的一部分。JavaScript 提供了丰富的字符串方法，帮助我们高效地操作文本数据。今天，我们就来深入了解几个常用的字符串方法：indexOf(), includes(), startsWith(), 和 endsWith()，掌握它们，将使你的代码更加简洁高效。

开篇：字符串处理的重要性

无论是在用户输入验证、数据格式化，还是在复杂的文本解析中，我们都离不开对字符串的操作。掌握字符串处理方法，不仅可以提高开发效率，还可以减少代码中的错误。接下来，我们将通过实际案例，学习如何运用这些方法。

核心：四大字符串方法的解析

1. String.prototype.indexOf()

indexOf() 方法用于查找子字符串在字符串中首次出现的位置。它返回子字符串的起始索引，如果未找到，则返回 -1。

const str = "Watermelon";
console.log(str.indexOf("melon")); // 输出 5

const str2 = "Watermelon melon";
console.log(str2.indexOf('melon')); // 输出 5

const str3 = "WATERMELON melon";
console.log(str3.indexOf('melon')); // 输出

注意：

indexOf() 方法区分大小写。
如果字符串中多次出现子字符串，indexOf() 只会返回第一次出现的索引。

2. String.prototype.includes()

includes() 方法用于判断字符串是否包含指定的子字符串。它返回一个布尔值，true 表示包含，false 表示不包含。

const str = "Watermelon";
console.log(str.includes("melon")); // 输出 true

const str2 = "WATERMELON";
console.log(str2.includes("melon")); // 输出 false

注意：

includes() 方法也区分大小写。
与 indexOf() 不同，includes() 更关注字符串是否包含，而不关心具体位置。

3. String.prototype.startsWith()

startsWith() 方法用于判断字符串是否以指定的子字符串开头。它返回一个布尔值，true 表示是，false 表示不是。

const str = "Watermelon";
console.log(str.startsWith("Water"));  // 输出 true
console.log(str.startsWith("Water", 1)); // 输出 false
console.log(str.startsWith("melon", 5)); // 输出 true
console.log(str.startsWith("lon", 7)); // 输出 false

注意：

startsWith() 方法区分大小写。
startsWith() 方法可以接受第二个参数，指定从哪个索引开始查找。

4. String.prototype.endsWith()

endsWith() 方法用于判断字符串是否以指定的子字符串结尾。它返回一个布尔值，true 表示是，false 表示不是。

const str = "Watermelon";
console.log(str.endsWith("melon")); // 输出 true
console.log(str.endsWith("me", 7));  // 输出 true
console.log(str.endsWith("melon", 8)); // 输出 false

注意：

endsWith() 方法也区分大小写。
endsWith() 方法可以接受第二个参数，指定字符串的长度作为查找的范围。

代码实践

为了更好地理解这些方法，我们来用几个实际的例子：

// 验证用户输入是否包含敏感词
const userInput = "This is a watermelon";
const sensitiveWords = ["bad", "melon"];

let hasSensitiveWord = false;
for (const word of sensitiveWords) {
  if (userInput.includes(word)) {
    hasSensitiveWord = true;
    break;
  }
}

if (hasSensitiveWord) {
  console.log("Input contains sensitive words!");
} else {
  console.log("Input is valid.");
}

// 提取文件名后缀
const fileName = "image.jpg";
if(fileName.endsWith(".jpg") || fileName.endsWith(".png")) {
    console.log("This is image file")
}

总结与建议

indexOf(), includes(), startsWith(), 和 endsWith() 是 JavaScript 中非常实用的字符串处理方法。它们可以帮助我们高效地完成字符串查找、匹配和判断等操作。

indexOf()：用于查找子字符串的首次出现位置，返回索引或 -1。
includes()：用于判断字符串是否包含指定的子字符串，返回布尔值。
startsWith()：用于判断字符串是否以指定的子字符串开头，返回布尔值，可指定起始位置。
endsWith()：用于判断字符串是否以指定的子字符串结尾，返回布尔值，可指定查找范围。

掌握这些方法，可以让你在前端开发中更加得心应手。在实际开发中，请根据具体场景选择合适的方法，避免不必要的代码冗余。

你还知道哪些其他的字符串处理技巧呢？欢迎在评论区分享你的经验！