新的字符串方法：startsWith, endsWith, includes

字符串三剑客：startsWith、endsWith、includes 的江湖历险记

话说江湖风起云涌，前端武林也暗流涌动。各种框架、库层出不穷，让人眼花缭乱。但万变不离其宗，字符串操作永远是各路英雄闯荡江湖的必备技能。今天，我们就来聊聊字符串江湖中新晋的三位高手：startsWith、endsWith 和 includes。

这三位高手，虽然出道时间不算长，但凭借着简单易懂、高效实用的特点，迅速赢得了众多江湖人士的喜爱，成为字符串处理领域的当红炸子鸡。

第一回：startsWith 大侠，开门见山，一剑封喉

startsWith 大侠，正如其名，擅长从字符串的开头入手，判断字符串是否以特定的子字符串开头。他出手干净利落，一剑封喉，直接告诉你结果，毫不拖泥带水。

想象一下，你是一位镖局的总镖头，负责押送一批重要的货物。为了确保万无一失，你需要仔细检查每个包裹的标签，看看是否以特定的标记开头，例如 "VIP-"，表示这是贵重物品。

传统的做法可能是这样：

const label = "VIP-GoldenDragon";
if (label.substring(0, 4) === "VIP-") {
  console.log("这是贵重物品，务必小心！");
} else {
  console.log("普通货物，正常押送即可。");
}

这种方法虽然可行，但总感觉有点笨重，而且容易出错。万一哪天你的手一抖，把 substring 的参数写错了，那就可能误判货物，造成不必要的损失。

这时候，startsWith 大侠就可以大显身手了：

const label = "VIP-GoldenDragon";
if (label.startsWith("VIP-")) {
  console.log("这是贵重物品，务必小心！");
} else {
  console.log("普通货物，正常押送即可。");
}

是不是感觉清爽多了？ startsWith 大侠直接告诉你字符串是否以 "VIP-" 开头，简单明了，再也不用担心手抖写错参数了。

更厉害的是，startsWith 大侠还支持第二个参数，表示从字符串的哪个位置开始查找。

比如，你收到一封密信，信的内容是 "SECRET: The password is SwordFish"。你想知道密码是否以 "Sword" 开头，但又不想把 "SECRET:" 这部分包含进去，就可以这样：

const message = "SECRET: The password is SwordFish";
if (message.startsWith("Sword", 20)) {
  console.log("密码以 Sword 开头，计划可以执行！");
} else {
  console.log("密码不正确，需要重新获取密码。");
}

这里的 20 表示从字符串的第 20 个字符开始查找。这样，startsWith 大侠就只会在 "SwordFish" 这部分字符串中寻找 "Sword"，确保结果的准确性。

第二回：endsWith 女侠，收尾利落，滴水不漏

与 startsWith 大侠不同，endsWith 女侠擅长从字符串的结尾入手，判断字符串是否以特定的子字符串结尾。她心思缜密，收尾利落，确保结果滴水不漏。

想象一下，你是一位经验丰富的侦探，正在调查一起神秘的案件。你发现了一份文件，但你只关心文件的后缀名，因为这可能暗示着文件的类型和来源。

传统的做法可能是这样：

const filename = "case_evidence.pdf";
if (filename.substring(filename.length - 3) === "pdf") {
  console.log("这是一份 PDF 文件，可能包含重要线索！");
} else {
  console.log("这不是 PDF 文件，暂时排除。");
}

这种方法虽然也能达到目的，但总感觉有点复杂，而且容易出错。你需要计算字符串的长度，然后使用 substring 方法提取后缀名，稍有不慎就可能出错。

这时候，endsWith 女侠就可以挺身而出了：

const filename = "case_evidence.pdf";
if (filename.endsWith("pdf")) {
  console.log("这是一份 PDF 文件，可能包含重要线索！");
} else {
  console.log("这不是 PDF 文件，暂时排除。");
}

是不是感觉简洁多了？ endsWith 女侠直接告诉你字符串是否以 "pdf" 结尾，简单快捷，再也不用担心计算字符串长度的麻烦了。

同样地，endsWith 女侠也支持第二个参数，表示从字符串的哪个位置之前结束查找。

比如，你有一段描述案件的文件名 "case_evidence_secret.txt"，但你只想检查 "case_evidence" 这部分是否以 "evidence" 结尾，就可以这样：

const filename = "case_evidence_secret.txt";
if (filename.endsWith("evidence", 13)) {
  console.log("文件名包含 evidence 关键词，需要重点关注！");
} else {
  console.log("文件名不包含 evidence 关键词，暂时忽略。");
}

这里的 13 表示只检查字符串的前 13 个字符，也就是 "case_evidence" 这部分。这样，endsWith 女侠就只会在这部分字符串中寻找 "evidence"，确保结果的准确性。

第三回：includes 侠客，大海捞针，无所遁形

与 startsWith 大侠和 endsWith 女侠不同，includes 侠客擅长在整个字符串中查找特定的子字符串，无论子字符串出现在哪里，他都能找到。他目光锐利，大海捞针，让目标无所遁形。

想象一下，你是一位网络安全专家，正在分析一段可疑的网络流量数据。你需要检查这段数据中是否包含特定的恶意代码片段，例如 "malware_signature"。

传统的做法可能是这样：

const trafficData = "This is a normal traffic data, but contains malware_signature inside.";
if (trafficData.indexOf("malware_signature") !== -1) {
  console.log("发现恶意代码片段，需要立即采取措施！");
} else {
  console.log("未发现恶意代码片段，暂时安全。");
}

这种方法虽然也能实现目标，但总感觉有点迂回。你需要使用 indexOf 方法查找子字符串的位置，然后判断返回值是否为 -1，才能确定是否包含子字符串。

这时候，includes 侠客就可以闪亮登场了：

const trafficData = "This is a normal traffic data, but contains malware_signature inside.";
if (trafficData.includes("malware_signature")) {
  console.log("发现恶意代码片段，需要立即采取措施！");
} else {
  console.log("未发现恶意代码片段，暂时安全。");
}

是不是感觉更加直接了？ includes 侠客直接告诉你字符串是否包含 "malware_signature"，简单易懂，再也不用进行额外的判断了。

同样地，includes 侠客也支持第二个参数，表示从字符串的哪个位置开始查找。

比如，你有一段很长的文本，但你只想从中间某个位置开始查找某个关键词，就可以这样：

const longText = "This is a very long text with some keywords like important_keyword inside.";
if (longText.includes("important_keyword", 30)) {
  console.log("文本包含 important_keyword 关键词，需要重点关注！");
} else {
  console.log("文本不包含 important_keyword 关键词，暂时忽略。");
}

这里的 30 表示从字符串的第 30 个字符开始查找。这样，includes 侠客就只会从这部分字符串开始寻找 "important_keyword"，提高查找效率。

总结：三剑客的合力，天下无敌

startsWith、endsWith 和 includes 这三位字符串高手，各有千秋，各有所长。startsWith 大侠开门见山，endsWith 女侠收尾利落，includes 侠客大海捞针。他们虽然风格不同，但都简单易懂、高效实用，是字符串处理领域不可或缺的利器。

在实际开发中，我们可以根据不同的场景，选择不同的高手来解决问题。

如果你需要判断字符串是否以特定的子字符串开头，那就选择 startsWith 大侠。
如果你需要判断字符串是否以特定的子字符串结尾，那就选择 endsWith 女侠。
如果你需要在整个字符串中查找特定的子字符串，那就选择 includes 侠客。

当然，你也可以将他们组合起来使用，发挥更大的威力。

比如，你想查找所有以 "image_" 开头，并且以 ".jpg" 结尾的文件名：

const filenames = ["image_001.jpg", "text_002.txt", "image_003.png", "image_004.jpg"];
const imageFiles = filenames.filter(filename => filename.startsWith("image_") && filename.endsWith(".jpg"));
console.log(imageFiles); // 输出：["image_001.jpg", "image_004.jpg"]

在这个例子中，我们使用了 startsWith 和 endsWith 两个高手，共同完成了文件名的筛选任务。

总而言之，startsWith、endsWith 和 includes 这三位字符串高手，是前端武林中不可多得的人才。掌握他们的技能，可以让你在字符串处理领域游刃有余，事半功倍。希望这篇文章能帮助你更好地理解和使用这三位高手，让你在前端开发的道路上越走越远！

江湖彩蛋：一些额外的思考

这三位高手都区分大小写。如果你需要进行不区分大小写的查找，可以使用 toLowerCase() 或 toUpperCase() 方法将字符串转换为统一的大小写形式，然后再进行查找。
这三位高手都是 ES6 中新增的方法，如果你的代码需要在旧版本的浏览器中运行，可能需要使用 polyfill 来兼容。
虽然这三位高手都很强大，但并不是万能的。在处理复杂的字符串匹配问题时，可能还需要使用正则表达式等更高级的技巧。

希望这些彩蛋能让你对字符串处理有更深入的了解！祝你在前端武林中早日成为一代宗师！

字符串三剑客：startsWith、endsWith、includes 的江湖历险记

发表回复 取消回复

发表回复取消回复