JS字串學習之透過截取子字串的方式傳回檔案副檔名

在先前的文章《js字串學習之怎麼傳回給定下標間的子字串》中，我們介紹了截取指定下標位置間字串，並傳回被擷取的部分（子串）的方法。這次我們繼續JavaScript字串學習，了解另一種截取字串方法，有興趣的朋友可以學習了解一下~

本文的主題是介紹一下按照指定長度截取字串的方法，然後利用這種方法可看看如何取得檔案的副檔名。

首先我們來看看要如何截取指定長度的子字串並回傳呢？下面來跟大家具體介紹一下。

我們來看看一個範例：

var str="Hello world!";
var n=str.substr(2,3)
console.log(n);

輸出結果：

可以看出：我們使用str.substr(2,3)從第三個字元開始，截取了3個字符，因此傳回的子字串為「llo」。

我們來了解substr()方法。

str.substr(start,length)方法能夠根據指定長度來截取子字串。它包含兩個參數，第一個參數start不可省略，表示準備截取的子字串起始下標；第二個參數length可省略，表示截取的長度，即需要截取的字元數。

如果省略第二個參數length，那麼就會從start開始，截取後面全部的字元。

var str="Hello world!";
var n=str.substr(2)
console.log(n);

輸出結果：

如果如果第一個參數start為負值，則表示從字串的尾部開始計算下標位置，即-1表示最後一個字符，-2 表示倒數第二個字符，以此類推。 （這對於左側字元長度不固定時非常有用。）

var str="Hello world!";
var n1=str.substr(-1,1);
var n2=str.substr(-2,1);
var n3=str.substr(-3,2);
console.log(n1);
console.log(n2);
console.log(n3);

輸出結果：

#透過上文，我們知道可以使用substr()方法來截取指定長度子字串，並傳回該子字串。 下面我們來看看利用這個方法怎麼來取得檔案副檔名。

我們可以使用substr()和lastIndexOf()方法取得檔案的副檔名，例如有下方一個檔案url

../img/JS字串學習之透過截取子字串的方式傳回檔案副檔名

使用下面語句就可取得檔案的副檔名：

var str="../img/JS字串學習之透過截取子字串的方式傳回檔案副檔名";
var b = str.substr(str.lastIndexOf(".") ,4);  //截取最后一个点号开始4个字符
console.log(b);  //返回子字符串“.png”

分析：使用str.lastIndexOf(".")可以取得字元「.」最後一次的出現位置，然後將其作為substr()方法的第一個參數，指定截取字串的開始位置。因為擴展名“.png”有四個字符，因此設定substr()方法的第二個參數為4即可。

輸出結果：

如果只想取得到“png”，那麼可以在 str.lastIndexOf(".")的基礎上加1：

var str="../img/JS字串學習之透過截取子字串的方式傳回檔案副檔名";
var b = str.substr(str.lastIndexOf(".")+1 ,3);  //截取最后一个点号后3个字符
console.log(b);  //返回子字符串“png”

輸出結果：

這是知道副檔名的長度，但有時副檔名的長度是不固定的，那麼我們就可以省略substr()方法的第二個參數，直接取得字元「.」後全部字元即可：

var str="../img/JS字串學習之透過截取子字串的方式傳回檔案副檔名";
var b = str.substr(str.lastIndexOf(".")+1 );  
console.log(b);
  
var str="../img/1.jpeg";
var b = str.substr(str.lastIndexOf(".")+1 );  
console.log(b);

輸出結果：

好了，就說到這裡了，有需要的可以看：javascript高階教學

以上是JS字串學習之透過截取子字串的方式傳回檔案副檔名的詳細內容。更多資訊請關注PHP中文網其他相關文章！