JavaScript でファイル名拡張子を取得する

1. JavaScript の .split() および .pop() メソッドを使用してファイル拡張子を取得する
2. JavaScript の .substr() メソッドでファイル拡張子を取得する
3. JavaScript の .slice() メソッドでファイル拡張子を取得する
4. ES6 オブジェクトのデストラクションメソッドでファイル拡張子を取得する

ファイル名には拡張子が付いており、オペレーティングシステムとユーザーがファイルタイプを識別しやすくなります。ほとんどの拡張子は 3 文字の長さですが、それより長い場合もあります。たとえば、.doc、.xls、.ppt などの古い Microsoft Office 拡張子は 3 文字でしたが、.docx、.xlsx、。pptx などの新しい拡張子はは 4 文字です。組み込みの 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() 関数は、この関数にパラメーターとして渡されたインデックスによって定義された文字列の一部を返します。これは、開始インデックスと終了インデックスの 2つのパラメータを取ります。この関数は、開始インデックスの文字を含み、終了インデックスの文字を除外した、開始インデックスと終了インデックスの間の文字列を返します。したがって、ファイルの拡張子を抽出するために 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() メソッドでファイル拡張子を取得する

ファイル名の文字列データ型を扱っています。したがって、文字列演算子を適用できます。そのような演算子の 1つが .slice() です。これは substr() 関数と同様に機能し、開始インデックスと終了インデックスで定義された配列のセクションを返します。slice() 関数に値を 1つだけ渡すと、そのインデックス値が開始インデックスと見なされます。そして、そのポイントから文字列を返します。スライスを使用してファイル拡張子を取得するには、次のコードを参照してください。

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() 関数は、それを適用する文字列を改ざんしません。したがって、予約なしで簡単に使用できます。また、ファイル名文字列からファイル拡張子を抽出するためのより高速な方法です。

ES6 オブジェクトのデストラクションメソッドでファイル拡張子を取得する

オブジェクトのデストラクションは、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 をログに記録してファイル拡張子を取得できます。