ES6字符串endsWith使用方法详解
对于一个文章开发者来说,牢固扎实的基础是十分重要的,golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《ES6字符串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学习网公众号!

- 上一篇
- 微任务队列无限执行顺序详解

- 下一篇
- Golang反射实现动态代理与AOP技巧
-
- 文章 · 前端 | 5小时前 |
- BOM模态对话框实现方法全解析
- 424浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- HTML表单验证样式化技巧大全
- 124浏览 收藏
-
- 文章 · 前端 | 5小时前 |
- HTML转Markdown格式的实用技巧
- 433浏览 收藏
-
- 文章 · 前端 | 6小时前 |
- CSS空状态处理::empty实用技巧分享
- 251浏览 收藏
-
- 文章 · 前端 | 6小时前 |
- ReactOTP输入框常见问题解析
- 289浏览 收藏
-
- 文章 · 前端 | 6小时前 |
- JS对象转JSON字符串技巧
- 464浏览 收藏
-
- 文章 · 前端 | 6小时前 |
- HTML引入外部样式表的5种link标签方式
- 376浏览 收藏
-
- 文章 · 前端 | 6小时前 |
- 微任务队列何时执行?详解JS执行机制
- 316浏览 收藏
-
- 文章 · 前端 | 6小时前 |
- 事件循环与设计模式如何配合使用
- 238浏览 收藏
-
- 文章 · 前端 | 6小时前 |
- CSS打印样式设置方法@mediaprint详解
- 187浏览 收藏
-
- 文章 · 前端 | 6小时前 |
- HTML表格跨域问题解决方法
- 314浏览 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 511次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 498次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 484次学习
-
- TextIn智能文字识别平台
- TextIn智能文字识别平台,提供OCR、文档解析及NLP技术,实现文档采集、分类、信息抽取及智能审核全流程自动化。降低90%人工审核成本,提升企业效率。
- 8次使用
-
- 简篇AI排版
- SEO 简篇 AI 排版,一款强大的 AI 图文排版工具,3 秒生成专业文章。智能排版、AI 对话优化,支持工作汇报、家校通知等数百场景。会员畅享海量素材、专属客服,多格式导出,一键分享。
- 8次使用
-
- 小墨鹰AI快排
- SEO 小墨鹰 AI 快排,新媒体运营必备!30 秒自动完成公众号图文排版,更有 AI 写作助手、图片去水印等功能。海量素材模板,一键秒刷,提升运营效率!
- 9次使用
-
- Aifooler
- AI Fooler是一款免费在线AI音频处理工具,无需注册安装,即可快速实现人声分离、伴奏提取。适用于音乐编辑、视频制作、练唱素材等场景,提升音频创作效率。
- 9次使用
-
- 易我人声分离
- 告别传统音频处理的繁琐!易我人声分离,基于深度学习的AI工具,轻松分离人声和背景音乐,支持在线使用,无需安装,简单三步,高效便捷。
- 9次使用
-
- 优化用户界面体验的秘密武器:CSS开发项目经验大揭秘
- 2023-11-03 501浏览
-
- 使用微信小程序实现图片轮播特效
- 2023-11-21 501浏览
-
- 解析sessionStorage的存储能力与限制
- 2024-01-11 501浏览
-
- 探索冒泡活动对于团队合作的推动力
- 2024-01-13 501浏览
-
- UI设计中为何选择绝对定位的智慧之道
- 2024-02-03 501浏览