别再用 slice 切片判断文件后缀了，js endsWith 才是正解

做前端或者后端开发，处理文件上传时难免遇到校验扩展名的需求。比如用户传了一张图片，你得确认它是 jpg 还是 png，确保存储安全。很多人习惯用 substr 或者 slice 去截取末尾字符比对，这招虽然能用，但代码写久了会显得笨拙且容易出错。今天聊聊 endsWith 这个方法，它能把这类逻辑变得优雅得多。

为什么 slice 不是最佳选择？

老派的写法通常是这样的：

const fileName = 'photo.jpg';
const isImage = fileName.slice(-4) === '.jpg';

问题在于，如果扩展名变成了 .jpeg 或 .webp，你就得回头修改所有硬编码的截取长度。一旦后缀长度变动，维护成本瞬间上升。而且 slice 返回的是字符串，还得再跟一个字符串比较，多此一举。相比之下，endsWith 的设计初衷就是为了语义化，直接调用就能返回布尔值，阅读性极强。

const isValid = fileName.endsWith('.jpg');

一眼看去就知道在检查什么，不需要读者去脑补“截取最后四个字符是在干嘛”。这种代码即文档的感觉，能极大降低团队协作时的沟通成本。

别忘了位置参数这个隐藏技能

大多数教程只讲到基本用法，其实它第二个参数很有用。它可以指定搜索的结束位置。想象这样一个场景：你需要验证一个临时生成的文件名，但它后面可能附带了一串哈希值，你只想确认主扩展名部分。

// 假设文件名可能是 photo.jpg_hash123
const name = 'photo.jpg_abc123';
const cleanName = name.split('_')[0];
const result = name.endsWith('jpg', cleanName.length); 

虽然日常用得不多，但配合 lastIndexOf 等逻辑处理复杂字符串拼接时，这个特性能提供比正则更轻量级的解决方案。它允许我们在不修改原字符串的情况下，限定匹配范围。

大小写是常见的坑

真实业务里，用户上传的文件名千奇百怪。系统可能是 .PNG，也可能是 .png。endsWith 默认是区分大小写的，直接写死后缀很容易漏判。

稳妥的做法永远是先统一转小写：

const ext = '.'.toLowerCase();
if (fileName.toLowerCase().endsWith(ext)) { ... }

别偷懒，这一步决定了你的校验是否严谨。有时候为了性能，有人会跳过转义，但在涉及安全校验的文件类型上，宁可慢一点也不能错。还有一个细节容易被忽略：空值风险。fileName 如果是 null 或 undefined，调用 endsWith 会直接报错。生产环境建议加上可选链或者默认值处理，避免线上白屏。

结合数组批量校验

实际项目中，允许的类型往往不止一种。这时候配合数组的 some 方法，逻辑依然清晰：

const allowed = ['.jpg', '.png', '.gif'];
const canUpload = allowed.some(type => fileName.toLowerCase().endsWith(type));

这段代码没有复杂的正则表达式嵌套，后续如果要加支持 .heic，只需往数组里丢个字符串，业务逻辑完全解耦。对比传统的 if...else 链式结构，可维护性提升明显。

总结

工具没有高低之分，只有合不合适。对于简单的后缀判断，endsWith 提供了最直接的语义表达。它能减少样板代码，让逻辑链路更短。下次写文件校验逻辑时，试着把 slice 替换掉，你会发现代码读起来更像是在讲人话。简洁、准确、易维护，这才是我们追求的质量。