如何使用js獲取擴(kuò)展名詳解

更新時間：2022年02月23日 14:17:52 作者：賣菜的小白

給你一個文件名,你能獲得它的擴(kuò)展名嗎?這篇文章主要給大家介紹了關(guān)于如何使用js獲取擴(kuò)展名的相關(guān)資料,文中介紹了幾種實(shí)現(xiàn)的方法,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

一、使用正則表達(dá)式

function getFileExtension1(filename) {
  return /[.]/.exec(filename) ? /[^.]+$/.exec(filename)[0] : undefined
}

這里的/[.]/.exec(filename)是用來判斷.是否存在，如果不存在的話，其值為null,/[^.]+$/.exec(filename)[0]拿到從.開始匹配的字符串，也就是擴(kuò)展名。如果不存在則返回undefined。

二、使用String中的split方法

function getFileExtension(filename) {
  return filename.split(".").pop()
}

三、使用String的lastIndexOf方法

function getFileExtension(filename) {
  return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2)
}

解釋：首先filename.slice()方法是用來切割字符串的，所以我們只需要獲取的.的下一位坐標(biāo)即可，此時我們可以使用filename.lastIndexOf()來獲取最后一位.所在的下標(biāo)。

我們需要考慮多種情況，

一種：如果filename.lastIndexOf()大于0,此時我們直接獲取下一位的坐標(biāo)即可，以下一位為起始進(jìn)行切割。

二種：如果filename.lastIndexOf為-1,則表示不存在.,此時我們應(yīng)該將其設(shè)置為一個很大的數(shù)，當(dāng)從一個大于字符串長度進(jìn)行切割時，返回的字符串為空字符串。

三種：如果filename.lastIndexOf為0時，則也表示不存在擴(kuò)展名，此時我們應(yīng)該將其設(shè)置為很大的數(shù)。

filename.lastIndex(".") - 1中這里的減一，就是將0變?yōu)?1, -1變成-2。

>>> 0的解釋：

console.log(12 >>> 0)    //12
console.log(1.2 >>> 0)   //1
console.log(1.8 >>> 0)   //1
console.log(-1 >>> 0)    //4294967295
console.log(-2 >>> 0)    //4294967294
console.log(0 >>> 0)     //0
如上述代碼和其結(jié)果所示。
如果值為正整數(shù)時，此時結(jié)果還為原來的值
如果值為小數(shù)時，此時結(jié)果為小數(shù)向下取整所得的值。
如果值為負(fù)數(shù)時，此時結(jié)果為當(dāng)前值 + 二的32次方所得的值。
如果值為0時，此時結(jié)果為0。

四、附獲取文件擴(kuò)展名的另兩種方法

substring，lastIndexOf聯(lián)合使用
split,pop聯(lián)合使用

下面貼上代碼：

//獲取文件后綴的js代碼
<script type="text/javascript">
        var strp;
    function getEx(){
        var filepath=document.getElementById('fileEx').value;
        var opt=parseInt(document.getElementById('opt').value);
        switch(opt){
            case 1:
                strp=filepath.substring(filepath.lastIndexOf(".")+1);
                break;
            case 2:
                strp=filepath.split(".").pop();
                break;
                        }
        alert(strp);
    }
    </script>
 
//html頁面
<input type="file" id="fileEx" name="fileEx">
<select id="opt">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<button onClick="getEx()">獲取</button>

簡要來說就是獲取文件路徑，然后使用不同的方法獲取后綴名