JavaScript去除文件名称中的后缀名的多种方法

 更新时间:2025年12月07日 14:50:26   作者:Never_Satisfied  
本文介绍了JavaScript中去除文件名后缀名的四种方法,并推荐使用substring()和lastIndexOf()方法,因为它简洁易懂,性能较好,并能处理特殊情况,需要的朋友可以参考下

在JavaScript中有多种方法可以去掉文件名的后缀名,以下是几种常见的方法:

方法1:使用substring()和lastIndexOf()

function removeFileExtension(filename) {
    const lastDotIndex = filename.lastIndexOf('.');
    if (lastDotIndex === -1) {
        return filename; // 没有后缀名,直接返回
    }
    return filename.substring(0, lastDotIndex);
}

// 示例
const filename1 = "document.txt";
const filename2 = "image.jpeg";
const filename3 = "no_extension";

console.log(removeFileExtension(filename1)); // "document"
console.log(removeFileExtension(filename2)); // "image"
console.log(removeFileExtension(filename3)); // "no_extension"

方法2:使用split()和pop()

function removeFileExtension(filename) {
    const parts = filename.split('.');
    if (parts.length > 1) {
        parts.pop(); // 移除最后一部分(后缀名)
        return parts.join('.');
    }
    return filename; // 没有后缀名
}

// 示例
console.log(removeFileExtension("photo.jpg")); // "photo"
console.log(removeFileExtension("archive.tar.gz")); // "archive.tar"

方法3:使用正则表达式

function removeFileExtension(filename) {
    return filename.replace(/\.[^/.]+$/, "");
}

// 示例
console.log(removeFileExtension("script.js")); // "script"
console.log(removeFileExtension("config.json")); // "config"

方法4:使用 ES6 的数组解构

function removeFileExtension(filename) {
    const [name] = filename.split('.').slice(0, -1).concat(filename.split('.').slice(0, -1).length ? [] : [filename]);
    return name || filename;
}

// 简化版本(适用于大多数情况)
function removeFileExtensionSimple(filename) {
    const parts = filename.split('.');
    return parts.length > 1 ? parts.slice(0, -1).join('.') : filename;
}

处理特殊情况

如果需要处理一些特殊情况(比如以点开头的隐藏文件):

function removeFileExtensionSafe(filename) {
    // 排除以点开头的隐藏文件(如 .gitignore)
    if (filename.startsWith('.') && filename.split('.').length === 2) {
        return filename;
    }
    
    const lastDotIndex = filename.lastIndexOf('.');
    return lastDotIndex === -1 ? filename : filename.substring(0, lastDotIndex);
}

// 示例
console.log(removeFileExtensionSafe(".gitignore")); // ".gitignore"
console.log(removeFileExtensionSafe("normal.file.txt")); // "normal.file"

推荐方案

对于大多数情况,我推荐使用方法1,因为它:

  • 代码简洁易懂
  • 性能较好
  • 处理了没有后缀名的情况
  • 可以正确处理多个点的情况(如 file.name.txtfile.name
function getFileNameWithoutExtension(filename) {
    const lastDotIndex = filename.lastIndexOf('.');
    return lastDotIndex === -1 ? filename : filename.slice(0, lastDotIndex);
}

选择哪种方法主要取决于你的具体需求和使用场景。

到此这篇关于JavaScript去除文件名称中的后缀名的多种方法的文章就介绍到这了,更多相关JavaScript去除文件名后缀名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js移动端图片压缩上传功能

    js移动端图片压缩上传功能

    这篇文章主要为大家详细介绍了js移动端图片压缩上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 从parcel.js打包出错到选择nvm的全部过程

    从parcel.js打包出错到选择nvm的全部过程

    这篇文章主要介绍了从parcel.js打包出错到选择nvm的全部过程,需要的朋友可以参考下
    2018-01-01
  • 心扬JS分页函数代码

    心扬JS分页函数代码

    通过js实现分页的代码,一般情况下需要指定页数,脚本之家以前也发布过一些,大家结合下即可。
    2010-09-09
  • JS冒泡事件的快速解决方法

    JS冒泡事件的快速解决方法

    这篇文章主要是对JS冒泡事件的快速解决方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JavaScript实现京东快递单号查询

    JavaScript实现京东快递单号查询

    这篇文章主要为大家详细介绍了JavaScript实现京东快递单号查询,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • Laravel中常见的错误与解决方法小结

    Laravel中常见的错误与解决方法小结

    大家在用Laravel框架期间可能会遇到了不少问题,现在我将自己遇到的一些问题总结出来,有一些调试起来着实不太容易,本文筛选出几个,希望这篇文章能让大家在PHP开发中少走一些弯路。
    2016-08-08
  • JS实现判断移动端PC端功能

    JS实现判断移动端PC端功能

    这篇文章主要介绍了JS实现判断移动端PC端功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • JavaScript 跨域之POST实现方法

    JavaScript 跨域之POST实现方法

    本篇文章主要介绍了JavaScript 跨域之POST实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • JAVASCRIPT IE 与 FF中兼容问题小结

    JAVASCRIPT IE 与 FF中兼容问题小结

    在不同浏览器中对于一些属性的支持也不一样,下面是对ie和firefox的一些小结。
    2009-02-02
  • 基于Arcgis for javascript实现百度地图ABCD marker的效果

    基于Arcgis for javascript实现百度地图ABCD marker的效果

    本篇文章由脚本之家小编给大家分享的基于Arcgis for javascript实现百度地图ABCD marker的效果,需要的朋友一起学习吧
    2015-09-09

最新评论