ES6字符串endsWith方法详解

ES6 引入了 `String.prototype.endsWith()` 方法，极大地简化了字符串结尾匹配的判断。本文将深入解析 `endsWith()` 的用法，包括其基本语法 `str.endsWith(searchString[, length])`，其中 `searchString` 为要匹配的子字符串，`length` 可选，用于限定搜索范围。通过实例展示了如何利用 `endsWith()` 进行文件类型、URL 路径以及数据格式的校验。同时，文章还对比了 `endsWith()`、`startsWith()` 和 `includes()` 的区别，并探讨了使用 `endsWith()` 时需要注意的大小写敏感、`length` 参数含义等问题。此外，针对不支持 ES6 的旧环境，本文提供了使用 `lastIndexOf()` 或 `substring()` 模拟实现 `endsWith()` 功能的方案，助力开发者编写兼容性更强的代码。

在ES6中，检查字符串是否以另一字符串结尾应使用String.prototype.endsWith()方法。该方法通过str.endsWith(searchString[, length])语法判断字符串结尾是否匹配searchString，返回true或false；可选参数length用于限定检查的字符串长度，默认为原字符串全长；例如'Hello'.endsWith('o',5)返回true；使用时需注意大小写敏感、length参数含义及空字符串行为；若需兼容旧环境，可通过lastIndexOf或substring模拟实现。

在ES6中，要检查一个字符串是否以另一个字符串结尾，我们直接使用 String.prototype.endsWith() 这个方法。它简单明了，就是为了解决这个特定需求而生的。

解决方案

String.prototype.endsWith() 方法允许你判断当前字符串是否以另一个字符串的字符结尾，并返回 true 或 false。它的基本用法是 str.endsWith(searchString[, length])。

searchString 参数是你想要检查的子字符串。 可选的 length 参数则有点意思，它定义了你希望将原字符串的哪一部分视为“结尾”。默认情况下，这个值是 str.length，也就是检查整个字符串的结尾。但如果你指定了 length，比如 5，那它就只会看原字符串的前5个字符，判断这5个字符的“结尾”是不是 searchString。这在处理特定长度限制的文本时特别有用。

举几个例子：

const fileName = 'document.pdf';
console.log(fileName.endsWith('.pdf')); // true

const urlPath = '/api/users/';
console.log(urlPath.endsWith('/')); // true
console.log(urlPath.endsWith('users/')); // true

const sentence = 'Hello world!';
console.log(sentence.endsWith('world!')); // true
console.log(sentence.endsWith('World!', 12)); // false (大小写敏感)
console.log(sentence.endsWith('o', 5)); // true (只看前5个字符 'Hello'，它的结尾是 'o')
console.log(sentence.endsWith('lo', 5)); // true ('Hello' 的结尾是 'lo')
console.log(sentence.endsWith('llo', 5)); // true ('Hello' 的结尾是 'llo')
console.log(sentence.endsWith('llo', 4)); // false (只看前4个字符 'Hell'，它的结尾不是 'llo')

console.log(''.endsWith('')); // true (空字符串以空字符串结尾)
console.log('abc'.endsWith('')); // true (任何字符串都以空字符串结尾)

endsWith、includes 和 startsWith 有何不同，我该如何选择？

这三个方法都是ES6字符串操作的利器，但它们各自有明确的用途。简单来说，endsWith 关注的是字符串的“尾巴”，startsWith 关注的是“头部”，而 includes 则是“全身扫描”。

startsWith() 顾名思义，检查字符串是否以某个子字符串开头。比如，你想知道一个文件名是不是以“report_”开头，或者一个URL是不是以“https://”开头，这时 startsWith 就是你的首选。

includes() 则更宽泛，它只关心某个子字符串是否存在于当前字符串的任何位置。你不需要知道它在哪，只要有就行。比如，检查一篇文章内容里有没有提到某个关键词，或者一个日志行里有没有某个错误代码，includes 就派上用场了。它不会告诉你位置，只会告诉你“有”或“没有”。

而 endsWith()，就像我们上面说的，它专门用来检查字符串的结尾。这在很多场景下都非常有用，比如：

• 文件类型判断：fileName.endsWith('.jpg')
• URL路径匹配：url.endsWith('/') 判断是否是目录结尾
• 数据格式校验：检查一个ID字符串是不是以特定后缀结尾，比如 userId.endsWith('-admin')。

选择哪个方法，完全取决于你的业务逻辑和实际需求。如果你的目标是精确匹配字符串的开头或结尾，那么 startsWith 或 endsWith 是最直接、意图最清晰的选择。如果只是想知道某个子串是否“存在”于字符串的某个地方，而不在乎具体位置，那 includes 更合适。我个人觉得，明确意图的代码是最好的代码，所以我会尽量选择最能表达我目的的方法。

endsWith 在实际开发中常遇到哪些陷阱或注意事项？

在使用 endsWith 的过程中，有几个小点需要我们注意，否则可能会遇到一些意料之外的结果。

一个常见的“陷阱”是大小写敏感性。endsWith 方法是严格区分大小写的。如果你期望它能忽略大小写进行匹配，那就需要你手动进行转换，比如将两个字符串都转换为小写或大写再比较。

const file = 'MyDocument.PDF';
console.log(file.endsWith('.pdf')); // false
console.log(file.toLowerCase().endsWith('.pdf')); // true (这样才符合预期)

另一个需要留心的是length 参数的理解。前面提到了，length 参数并不是 searchString 的长度，而是原字符串 str 的有效长度。这常常让初学者感到困惑。它定义的是 str 的一个“虚拟”截断点，endsWith 会在这个截断点之前进行匹配。

const data = 'abcdefg';
// 我想检查 'abcd' 的结尾是不是 'cd'
console.log(data.endsWith('cd', 4)); // true (因为 'abcd' 的结尾是 'cd')
// 而不是 'abcdefg' 的结尾
console.log(data.endsWith('efg', 4)); // false (因为只检查到 'abcd'，'efg' 不在其中)

如果 searchString 是一个空字符串 ''，endsWith 总是返回 true。这通常不会导致错误，但理解其行为很重要。任何字符串都可以说“以空字符串结尾”。

最后，如果 searchString 比原字符串（或指定 length 后的有效字符串）还长，endsWith 自然会返回 false。这很符合逻辑，但有时在动态生成 searchString 时，需要注意这种可能性。

如何在不支持 ES6 的旧环境中模拟 endsWith 功能？

虽然现在ES6及更高版本已经非常普及，但如果你确实需要在一些老旧的浏览器或Node.js环境中运行代码，而这些环境又不支持 String.prototype.endsWith，那么你就需要一个“垫片”（polyfill）来模拟这个功能。

模拟 endsWith 的方法有很多，核心思想就是利用已有的字符串操作方法来实现同样的效果。

一种常见且比较直观的方法是结合 String.prototype.lastIndexOf() 和字符串长度：

if (!String.prototype.endsWith) {
    String.prototype.endsWith = function(searchString, position) {
        var subjectString = this.toString();
        // 确保 position 是一个有效的索引，默认为字符串长度
        if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) {
            position = subjectString.length;
        }
        position -= searchString.length;
        var lastIndex = subjectString.indexOf(searchString, position);
        return lastIndex !== -1 && lastIndex === position;
    };
}

这个实现稍微复杂一点，因为它需要处理 position 参数的逻辑。

一个更简洁的模拟方式，尤其是在不考虑 position 参数或只考虑默认行为时，可以使用 String.prototype.slice()：

if (!String.prototype.endsWith) {
    String.prototype.endsWith = function(searchString, length) {
        // 确保 this 是字符串
        var str = this.toString();
        // 处理 length 参数
        var len = (typeof length === 'number' && length < str.length) ? length : str.length;
        // 从字符串末尾截取与 searchString 相同长度的部分进行比较
        return str.substring(len - searchString.length, len) === searchString;
    };
}

这个版本利用 substring（或者 slice 也可以，行为类似）从原字符串的“末尾”截取一段与 searchString 等长的部分，然后直接进行比较。这种方法通常更易于理解和实现。

在现代前端开发中，我们通常不会手动编写这些polyfill。更常见的方式是使用像 Babel 这样的转译工具。Babel 可以将你的ES6+代码自动转换为ES5兼容的代码，并根据需要引入相应的polyfill，这样你就不必担心旧环境的兼容性问题了。这大大简化了开发流程，让开发者可以专注于业务逻辑，而不是底层兼容性细节。

理论要掌握，实操不能落！以上关于《ES6字符串endsWith方法详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！