在 JavaScript 中獲取副檔名

1. JavaScript 中使用 .split() 和 .pop() 方法獲取副檔名
2. JavaScript 中使用 .substr() 方法獲取副檔名
3. JavaScript 中使用 .slice() 方法獲取副檔名
4. JavaScript 中使用 ES6 object destructuring 方法獲取副檔名

檔名帶有副檔名，可幫助作業系統和使用者識別檔案型別。大多數副檔名是三個字元長，但有時可能更多。例如，像 .doc、.xls、.ppt 等較舊的 Microsoft Office 副檔名曾經是三個字元，但較新的副檔名如 .docx、.xlsx、.pptx 是四個字元。讓我們看看使用內建 javascript 方法從檔名中提取副檔名部分的幾種方法。

JavaScript 中使用 .split() 和 .pop() 方法獲取副檔名

.split() 函式將字串拆分為字串陣列。它根據作為第一個引數傳遞給函式的某種模式將字串分解為子字串的陣列。.pop() 是 javascript 中的一個內建函式，它刪除陣列的最後一個元素並返回它。因此，我們可以結合使用這些方法來從檔名中獲取副檔名。讓我們看看下面的程式碼來了解用法。

let file1 = "somefile.txt";
let file2 = "somefile.xlsx";
console.log(file1.split(".").pop());
console.log(file2.split(".").pop());

輸出：

txt
xlsx

在程式碼中，我們使用 .split(".") 函式將檔名字串按 . 分割將其分解為多個部分。.pop() 函式返回損壞的檔名陣列的最後一個值。JavaScript .pop() 函式改變了我們應用它的字串陣列。

即使對於具有多個 . 的檔名，該方法也能很好地工作。在他們之中。.split(".").pop() 將返回分割檔名中的最後一段。因此，從給定的檔名中獲取副檔名是一種聰明的方法。

JavaScript 中使用 .substr() 方法獲取副檔名

為了提取檔名，我們在處理檔名字串時使用字串操作。另一種獲取副檔名的方法是使用 substr() 函式。顧名思義，substring() 函式返回一段由作為引數傳遞給該函式的索引定義的字串。它需要兩個引數，起始索引和結束索引。該函式返回起始索引和結束索引之間的字串，包括 starting index 處的字元並排除 ending index 處的字元。因此，我們可以使用 substring 函式來提取檔案的副檔名。參考以下程式碼。

let file1 = "somefile.txt";
let file2 = "somefile.xlsx";
console.log(file1.substr(-3));
console.log(file2.substr(-4));

輸出：

txt
xlsx

let file1 = "somefile.txt";
let file2 = "somefile.xlsx";
console.log(file1.substr( (file1.lastIndexOf(".")+1 - file1.length) ) );
console.log(file2.substr( (file2.lastIndexOf(".")+1 - file2.length) ) );

輸出：

txt
xlsx

JavaScript 中使用 .slice() 方法獲取副檔名

我們正在處理檔名的字串資料型別。因此，我們可以應用 string 運算子。一種這樣的操作符是 .slice()。它的工作原理類似於 substr() 函式並返回由 start index 和 end index 定義的陣列部分。如果我們只向 slice() 函式傳遞一個值，它會將該索引值視為 開始索引。並將從該點返回字串。使用 slice 獲取副檔名，請參考以下程式碼。

let file1 = "somefile.txt";
let file2 = "somefile.xlsx";
console.log(file1.slice( ( (file1.lastIndexOf(".") - 1) + 2) ) );
console.log(file2.slice( ( (file2.lastIndexOf(".") - 1) + 2) ) );

輸出：

txt
xlsx

.slice() 函式不會篡改我們應用它的字串。因此，我們可以毫無保留地輕鬆使用該方法。從檔名字串中提取副檔名也是一種更快的方法。

JavaScript 中使用 ES6 object destructuring 方法獲取副檔名

物件解構是 ES6 標準中引入的一個新特性。有了它，我們可以開啟一個 javascript 物件並將這些屬性繫結到變數。我們可以使用它從檔名中獲取副檔名。參考以下程式碼。

let file1 = "somefile.txt";
const [ext, ...fileName] = file1.split('.').reverse();
console.log(ext);

輸出：

txt

該程式碼使用 javascript 的 split(".") 函式使用 "." 拆分檔名，以獲取檔名部分的陣列。它將包括由 .split() 函式輸出的陣列的不同索引中返回的檔名和副檔名。.reverse() 方法反轉我們應用它的陣列。反轉陣列的第一個元素將儲存擴充套件值。我們使用 ES6 javascript 的 JavaScript 物件解構機制進一步提取 [ext, ...fileName] 中的 ext 變數。最後，我們可以記錄 ext 以獲得副檔名。