当前位置:首页 > 文章列表 > 文章 > 前端 > ES6字符串endsWith方法详解

ES6字符串endsWith方法详解

2025-07-16 09:36:21 0浏览 收藏

今日不肯埋头,明日何以抬头!每日一句努力自己的话哈哈~哈喽,今天我将给大家带来一篇《ES6字符串endsWith用法详解》,主要内容是讲解等等,感兴趣的朋友可以收藏或者有更好的建议在评论提出,我都会认真看的!大家一起进步,一起学习!

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

ES6中如何用字符串的endsWith检查结尾

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

ES6中如何用字符串的endsWith检查结尾

解决方案

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

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

ES6中如何用字符串的endsWith检查结尾

举几个例子:

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 (任何字符串都以空字符串结尾)

endsWithincludesstartsWith 有何不同,我该如何选择?

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

ES6中如何用字符串的endsWith检查结尾

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

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

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

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

选择哪个方法,完全取决于你的业务逻辑和实际需求。如果你的目标是精确匹配字符串的开头或结尾,那么 startsWithendsWith 是最直接、意图最清晰的选择。如果只是想知道某个子串是否“存在”于字符串的某个地方,而不在乎具体位置,那 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学习网公众号也会发布文章相关知识,快来关注吧!

变量名长度如何平衡简洁与描述性变量名长度如何平衡简洁与描述性
上一篇
变量名长度如何平衡简洁与描述性
豆包AI爬虫框架生成方法详解
下一篇
豆包AI爬虫框架生成方法详解
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    542次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    511次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    498次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    484次学习
查看更多
AI推荐
  • TextIn智能文字识别:高效文档处理,助力企业数字化转型
    TextIn智能文字识别平台
    TextIn智能文字识别平台,提供OCR、文档解析及NLP技术,实现文档采集、分类、信息抽取及智能审核全流程自动化。降低90%人工审核成本,提升企业效率。
    2次使用
  • SEO  简篇 AI 排版:3 秒生成精美文章,告别排版烦恼
    简篇AI排版
    SEO 简篇 AI 排版,一款强大的 AI 图文排版工具,3 秒生成专业文章。智能排版、AI 对话优化,支持工作汇报、家校通知等数百场景。会员畅享海量素材、专属客服,多格式导出,一键分享。
    5次使用
  • SEO  小墨鹰 AI 快排:公众号图文排版神器,30 秒搞定精美排版
    小墨鹰AI快排
    SEO 小墨鹰 AI 快排,新媒体运营必备!30 秒自动完成公众号图文排版,更有 AI 写作助手、图片去水印等功能。海量素材模板,一键秒刷,提升运营效率!
    4次使用
  • AI Fooler:免费在线AI音频处理,人声分离/伴奏提取神器
    Aifooler
    AI Fooler是一款免费在线AI音频处理工具,无需注册安装,即可快速实现人声分离、伴奏提取。适用于音乐编辑、视频制作、练唱素材等场景,提升音频创作效率。
    5次使用
  • 易我人声分离:AI智能音频处理,一键分离人声与背景音乐
    易我人声分离
    告别传统音频处理的繁琐!易我人声分离,基于深度学习的AI工具,轻松分离人声和背景音乐,支持在线使用,无需安装,简单三步,高效便捷。
    5次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码