JavaScript `endsWith()` 实用指南：轻松判断字符串结尾！42

嗨，各位前端小伙伴们，大家好啊！我是你们的老朋友，专注于分享各种实用前端知识的知识博主。
今天，咱们要深入探讨一个在日常开发中出镜率极高、却又时常被忽视的小工具——`JavaScript` 的 `endsWith()` 方法。你是不是经常遇到需要判断一个字符串是否以特定字符或子字符串结尾的场景？比如校验文件类型、检查 URL 路径、或是验证用户输入？以前你可能用 `lastIndexOf` 结合 `slice` 忙活半天，或者干脆祭出复杂的正则表达式。但现在，有了 `endsWith()`，这一切都变得前所未有的简单和优雅！
这篇文章，我将带你从 `endsWith()` 的基本用法出发，深入解析其参数、应用场景、兼容性考量，并对比其他替代方案，让你彻底掌握这个实用技巧，让你的代码更加简洁、高效！

`endsWith()` 是什么？核心概念速览

`JavaScript` 的 `()` 方法是一个非常有用的字符串方法，它用于判断当前字符串是否以另一个给定的子字符串结尾。这个方法在 ECMAScript 2015 (ES6) 中被引入，为字符串处理带来了极大的便利。

它的核心思想非常直接：你给它一个字符串（目标字符串），再给它一个你希望检查的子字符串（搜索字符串），它会告诉你目标字符串的末尾是否与搜索字符串匹配。

基本语法：
(searchString[, length])

参数解析：

`searchString`：(必需) 要搜索的子字符串。如果 `searchString` 不是字符串，它会被转换为字符串。
`length`：(可选) 默认值为 ``。这是一个非负整数，表示 `str` 的长度。`endsWith()` 会从 `str` 的开头到这个 `length` 指定的位置（不包含该位置）来搜索 `searchString`。注意： 这不是从字符串末尾往前数 `length` 个字符，而是将 `str` 视为 `(0, length)`，然后判断这个截取后的字符串是否以 `searchString` 结尾。这是一个常见的误区，后面我们会详细解释。

返回值：

如果 `str` 以 `searchString` 结尾，则返回 `true`。
否则返回 `false`。

参数详解与用法示例

1. 仅使用 `searchString` 参数

这是 `endsWith()` 最常见的用法，直接判断整个字符串是否以某个子字符串结尾。
const filename = "";
const url = "/api/users/";
const message = "Hello world!";
((".pdf")); // true
(("users/")); // true
(("world")); // false (因为缺少'!')
(("world!"));// true
(("")); // true (空字符串被认为可以匹配任何字符串的结尾)
("".endsWith("")); // true
("".endsWith("a")); // false
// 大小写敏感！
((".PDF")); // false

从上面的例子可以看出，`endsWith()` 是区分大小写的。如果你的判断需要忽略大小写，你需要先将字符串转换为统一的大小写（通常是小写），然后再进行比较。

2. 结合 `length` 参数的使用

`length` 参数是 `endsWith()` 方法的一个巧妙之处，但也是最容易引起误解的地方。它并不是让你从字符串末尾往前数 `length` 个字符来比较，而是限定了 `endsWith()` 方法在原字符串的哪个“子区域”内进行搜索。

更准确地说，`(searchString, length)` 的行为等同于 `(0, length).endsWith(searchString)`。它会先从原字符串 `str` 中截取出从索引 `0` 到 `length-1` 的部分，然后判断这个截取后的字符串是否以 `searchString` 结尾。
const text = "apple, banana, cherry";
// 正常的判断：整个字符串是否以 'cherry' 结尾
(("cherry")); // true
// 使用 length 参数
// 相当于判断 "apple, banana," (长度为14) 是否以 "banana," 结尾
(("banana,", 14)); // true
// 相当于判断 "apple, banana" (长度为13) 是否以 "banana" 结尾
(("banana", 13)); // true
// 相当于判断 "apple," (长度为6) 是否以 "cherry" 结尾
(("cherry", 6)); // false
// 一个常见的误解示例：
// 如果你以为 length=6 是从 'cherry' 往前数6个字符，那就错了。
// 这里的 'text' 被视为 "apple,"，然后判断 "apple," 是否以 "cherry" 结尾，显然是 false。
(("cherry", 6)); // false
// 如果 searchString 比 length 指定的子字符串还长，则直接返回 false
("abcdefg".endsWith("fg", 2)); // false (因为 "ab".endsWith("fg") 为 false)

理解 `length` 参数的关键在于：它定义了 `endsWith` 方法所关注的“有效字符串区域”的结束索引（不含）。在这个区域内，才去判断其是否以 `searchString` 结尾。

实用场景与进阶技巧

`endsWith()` 方法在很多场景下都能派上用场，让你的代码更加简洁直观。

1. 文件类型判断

这是最常见的场景之一，用于根据文件扩展名判断文件类型。
function isImageFile(filename) {
// 转换为小写进行不区分大小写的判断
const lowerFilename = ();
return (".jpg") ||
(".png") ||
(".gif");
}
(isImageFile("")); // true
(isImageFile("")); // false

2. URL 路径或路由校验

在处理 URL 或路由时，判断路径是否以特定的斜杠或参数结尾。
const currentPath = "/admin/users/profile/";
if (("/")) {
("路径以斜杠结尾，可能需要移除或重定向。");
// ((0, -1)); // 移除末尾斜杠
}
const apiEndpoint = "/api/v1/data";
if (("/data")) {
("这是一个数据获取接口。");
}

3. 表单输入验证

在某些特殊需求下，你可能需要验证用户输入是否符合某种结尾模式。
const userInput = "Hello, I am fine.";
if (!(".")) {
("输入内容应该以句号结束。");
}

4. 日志或数据解析

在处理日志文件或大量文本数据时，快速筛选出以特定标识符结尾的行。
const logEntries = [
"INFO: User logged in.",
"WARN: Disk usage high!",
"ERROR: Database connection failed.",
"INFO: Application started."
];
(entry => {
if (("failed.")) {
("发现错误日志:", entry);
}
});

5. 处理不区分大小写的情况

如前所述，`endsWith()` 是区分大小写的。如果需要不区分大小写，最简单的方法就是先将字符串转换为统一的大小写再比较。
const text = "TypeScript";
(().endsWith("script")); // true
(().endsWith("SCRIPT")); // true

兼容性与性能考量

浏览器兼容性

`endsWith()` 方法是 ES6 (ECMAScript 2015) 的特性。这意味着在现代浏览器中（如 Chrome 41+, Firefox 17+, Edge 12+, Safari 9+, Opera 28+），你可以放心地使用它。

然而，如果你需要支持旧版浏览器，特别是 Internet Explorer (IE)，它是不支持 `endsWith()` 的。在这种情况下，你需要考虑使用 polyfill 或替代方案。

Polyfill 示例（MDN 官方提供）：
if (!) {
= function(searchString, position) {
const subjectString = ();
if (typeof position !== 'number' || !isFinite(position) || (position) !== position || position > ) {
position = ;
}
position -= ;
const lastIndex = (searchString, position);
return lastIndex !== -1 && lastIndex === position;
};
}

在你的项目入口处引入这个 polyfill，就能让旧浏览器也能使用 `endsWith()` 方法。

性能考量

对于大多数日常使用场景，`endsWith()` 的性能是完全足够的。它是一个原生的字符串方法，通常会经过高度优化。

相比于使用正则表达式，对于简单的字符串结尾判断，`endsWith()` 通常会更快、更简洁。正则表达式虽然功能强大，但在简单场景下可能会引入不必要的开销。当然，如果你需要进行复杂的模式匹配（例如，以 `.jpg` 或 `.jpeg` 结尾，并且文件名不包含空格），那么正则表达式可能是更好的选择。

替代方案（当 `endsWith()` 不适用时）

尽管 `endsWith()` 是现代 JavaScript 中判断字符串结尾的首选方法，但在某些特定情况下（如需要兼容超旧浏览器，或进行更复杂的模式匹配），你可能需要考虑其他替代方案。

1. 使用 `lastIndexOf()` 结合 `slice()` 或 `substring()`

这是 `endsWith()` 出现之前最常见的实现方式，也是其 polyfill 的底层逻辑之一。
function endsWithPolyfill(str, searchString, length) {
// 处理可选的 length 参数
if (length === undefined || length > ) {
length = ;
}
// 截取目标字符串的有效部分
const targetStr = (0, length);
// 如果 searchString 比目标字符串还长，则不可能匹配
if ( > ) {
return false;
}
// 判断截取后的字符串的最后部分是否等于 searchString
return (-) === searchString;
}
const text = "Hello world!";
(endsWithPolyfill(text, "world!")); // true
(endsWithPolyfill(text, "world", 11)); // true (等同于 "Hello world".endsWith("world"))

这种方法在功能上等价于 `endsWith()`，但代码更为冗长，可读性也稍差。

2. 使用正则表达式 (RegExp)

正则表达式提供强大的模式匹配能力，你可以使用 `$` 锚点来匹配字符串的结尾。
const filename = "";
const text = "Hello world!";
// 区分大小写
(/pdf$/.test(filename)); // true
(/PDF$/.test(filename)); // false
// 不区分大小写 (使用 i 标志)
(/pdf$/(filename)); // true
// 匹配多个结尾
(/\.(jpg|png|gif)$/("")); // true
// 配合 length 参数的场景会更复杂，不推荐直接用 RegExp 模拟
// 对于简单判断，RegExp 会比 endsWith 稍微慢一些，但对于复杂模式匹配是首选。

正则表达式的优势在于其灵活性和强大性，能够处理更复杂的结尾模式（如 "以 `.jpg` 或 `.jpeg` 结尾"），并且可以通过标志（如 `i`）轻松实现不区分大小写的匹配。缺点是对于简单的判断，语法相对复杂，可能不如 `endsWith()` 直观。

总而言之，`endsWith()` 方法作为现代 JavaScript 提供的字符串处理利器，以其简洁、直观的语法，极大地提升了我们判断字符串结尾的效率和代码可读性。对于绝大多数现代项目而言，它应该是你的首选。

记住它的主要特点：

判断字符串是否以指定子字符串结尾。
区分大小写。
可选的 `length` 参数用于限定搜索范围（等同于对 `substring(0, length)` 进行判断）。
是 ES6 特性，需注意旧浏览器兼容性问题，必要时使用 polyfill。

希望通过这篇文章的讲解，你能够对 `endsWith()` 方法有了一个全面而深入的理解，并能在今后的开发中灵活运用，写出更优雅、更高效的 JavaScript 代码！如果你有任何疑问或心得，欢迎在评论区与我交流！

2025-11-22

---

上一篇：从MVC到现代前端：JavaScript控制器的演进与实践指南

下一篇：JavaScript 字符串编码深度解析：告别乱码，驾驭字符世界的奥秘