异常教程
JavaScript endsWith() 方法（手把手讲解）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
前言：探索字符串的“结尾密码”
在 JavaScript 开发中，字符串操作是日常编码的核心任务之一。无论是验证用户输入、解析 URL，还是处理文件路径，开发者常常需要判断字符串的结尾是否符合特定模式。此时，一个高效且直观的方法——endsWith() 就显得尤为重要。它如同一把精准的钥匙，能快速判断字符串是否以指定内容结束。本文将从基础到进阶，结合实际案例，深入解析 JavaScript endsWith() 方法 的使用场景与技巧，帮助开发者轻松掌握这一工具。
基本用法：字符串结尾的“指纹识别”
语法结构与核心逻辑
endsWith() 方法用于检测一个字符串是否以指定的子字符串结尾。其语法如下：
string.endsWith(searchString[, position]);
searchString：必选参数，表示要匹配的结尾字符串。position：可选参数，指定检查的结束位置（默认为字符串的长度）。
核心逻辑：该方法会从字符串的起始位置到 position（或末尾）范围内，检查是否以 searchString 结尾，并返回 true 或 false。
示例 1：基础验证
const fileName = "report.pdf";
console.log(fileName.endsWith(".pdf")); // true
console.log(fileName.endsWith(".doc")); // false
比喻：就像检查文件的“身份证号码”是否以特定后缀结束，.pdf 是 PDF 文件的“指纹”，endsWith() 直接判断是否匹配。
参数详解：灵活控制检查范围
searchString：精准的“模式匹配”
searchString 必须是字符串类型，否则会自动转换为字符串。例如：
console.log("2023-10-05".endsWith(5)); // true（5 转换为字符串"5"）
console.log("apple".endsWith("p", 3)); // true（检查前3个字符是否以 "p" 结尾）
注意：若 searchString 长度超过字符串本身，直接返回 false。例如：
"cat".endsWith("cater"); // false
position：设置“检查边界”
通过 position 参数，可以限定检查的结束位置。例如：
const text = "hello world";
console.log(text.endsWith("world")); // true（默认检查到末尾）
console.log(text.endsWith("hello", 5)); // true（检查前5个字符是否以 "hello" 结尾）
console.log(text.endsWith("lo", 5)); // true（检查前5个字符是否以 "lo" 结尾）
关键点：如果 position 小于 searchString 的长度，则直接返回 false。例如：
"text".endsWith("text", 2); // false（"te" 不包含 "text"）
进阶技巧：与类似方法的对比与扩展
与 includes() 和 startsWith() 的区别
endsWith()：检查结尾是否匹配。startsWith()：检查开头是否匹配。includes()：检查任意位置是否存在匹配。
示例对比
const url = "https://example.com/api/data";
console.log(url.endsWith("/data")); // true
console.log(url.startsWith("https")); // true
console.log(url.includes("api")); // true
处理多编码字符与空字符串
endsWith() 能正确处理 Unicode 字符和空字符串：
// Unicode 字符
console.log("café".endsWith("é")); // true
// 空字符串
console.log("".endsWith("")); // true（空字符串视为匹配自身）
结合其他方法的“组合拳”
可与其他字符串方法联用，例如验证文件扩展名：
function isValidImage(file) {
return (
file.endsWith(".jpg") ||
file.endsWith(".jpeg") ||
file.endsWith(".png")
);
}
console.log(isValidImage("photo.png")); // true
实际案例：从理论到实战
案例 1：表单输入验证
在用户输入邮箱地址时，检查是否以常见的域名结尾：
function validateEmail(email) {
const validDomains = [".com", ".net", ".org"];
return validDomains.some(domain => email.endsWith(domain));
}
console.log(validateEmail("user@example.com")); // true
console.log(validateEmail("user@example")); // false
案例 2：URL 路径处理
在前端路由中，判断路径是否为 API 请求：
function isApiRequest(path) {
return path.endsWith("/api");
}
console.log(isApiRequest("/api/data")); // true
console.log(isApiRequest("/about")); // false
案例 3：动态文件名处理
生成临时文件名时，确保扩展名正确：
function createTempFile(baseName) {
const fileName = baseName + "_temp.txt";
return fileName.endsWith(".txt") ? fileName : baseName + ".txt";
}
console.log(createTempFile("report")); // "report_temp.txt"
console.log(createTempFile("document.txt")); // "document.txt_temp.txt"（需进一步优化逻辑）
常见问题与解决方案
问题 1：参数类型错误
若传递非字符串参数，endsWith() 会隐式转换，可能导致意外结果：
"123".endsWith(123); // true（123 转换为 "123"，匹配成功）
解决方案：在调用前确保参数类型正确，或显式转换：
const check = (str, suffix) => str.endsWith(String(suffix));
问题 2：position 参数的负数处理
若 position 为负数，JavaScript 会将其视为 0，忽略该参数：
"text".endsWith("t", -1); // false（检查前0个字符，等价于空字符串）
问题 3：与正则表达式结合
当需要更复杂的模式匹配时，可结合 endsWith() 和正则表达式：
function isValidFilename(name) {
return name.endsWith(".js") && /^[a-zA-Z0-9_]+\.js$/.test(name);
}
结论：让代码更优雅的“结尾守护者”
通过本文的讲解，JavaScript endsWith() 方法 的核心逻辑、参数细节及实际应用已清晰呈现。它不仅简化了字符串结尾的判断逻辑，还能与其它方法协同工作，提升代码的可读性和效率。无论是基础验证、表单处理还是路径分析，endsWith() 都是开发者工具箱中的高效工具。
在未来的开发中，建议结合具体场景灵活运用该方法，并与其他字符串方法（如 startsWith()、includes()）形成组合策略。掌握 endsWith() 的深层逻辑，将帮助开发者编写出更健壮、简洁的代码，进一步提升开发效率与代码质量。