1. 概述与核心要点
ES6 字符串 endsWith 的基本认识
在前端开发中，字符串处理是日常逻辑的一部分，endsWith 提供了一种直观的方式判断一个字符串是否以某个子串结束。这是 ES6 引入的字符串方法之一，目的是让边界判断更简洁，减少冗长的条件判断代码。
使用 endsWith 可以让你在处理文件名、URL、路径等场景时，快速判断结尾子串是否匹配，从而提高代码可读性和可维护性。这种写法也更符合人类语言描述的直觉，减少理解成本。
2. 语法与用法
基本语法结构与含义
基本语法为 str.endsWith(searchString[, position])，其中 searchString 会被转换为字符串并与目标串的结尾部分比对。在未提供 position 时，比较的边界等同于整个字符串的长度。
当提供了 position，方法会把字符串视为从开头到该边界的子串，仍然以 searchString 作为结尾进行匹配。这对于需要控制比对范围的场景非常有用。
3. 参数详解
searchString 与 position 的作用机制
searchString 是要匹配的结尾子串，通常是一个普通字符串。position 是可选的，表示对比时使用的长度边界。
例如：如果你有 var s = 'abcdef';，那么 s.endsWith('def') 将返回 true，而 s.endsWith('def', 5) 结果为 false，因为边界长度为 5 不包含末尾的字符。
var s = 'abcdef';
console.log(s.endsWith('def')); // true
console.log(s.endsWith('def', 5)); // false
4. 兼容性与浏览器支持
浏览器支持与降级方案
endsWith 是 ES6 的一部分，大多数现代浏览器已原生实现，如 Chrome、Firefox、Edge、Safari 的较新版本。
然而，在 Internet Explorer 和部分旧版本浏览器中可能不支持这一方法。为了在旧环境中保持稳定，可以使用 polyfill，或在打包阶段引入降级实现。
// 简单的 endsWith polyfill
if (!String.prototype.endsWith) {String.prototype.endsWith = function(searchString, position) {var str = this.toString();if (position === undefined || position > str.length) {position = str.length;}if (position < 0) position = 0;return str.substring(position - searchString.length, position) === searchString;};
}
5. 常见用例与最佳实践
对比 includes 与 indexOf 的应用场景
在判断结尾子串时，endsWith 提供了更直观的语义，通常比使用 slice、indexOf 的组合更加清晰稳定。
对于文件后缀、路由结尾、以及 URL 参数末尾的标识等场景，endsWith 能减少边界错误，使代码更易读。
var file = 'photo.png';
console.log(file.endsWith('.png')); // truevar url = 'https://example.com/path/page';
console.log(url.endsWith('/page')); // true
6. 性能与实现要点
实现细节与性能考量
在实现层面，endsWith 会对字符串长度进行对比，并对 position 做边界裁剪，因此对于短字符串的比较通常比通用的子串比对更高效。
如果在高性能场景下重复使用，确保在旧浏览器环境中提供合适的 polyfill，避免运行时错误影响页面渲染。
