JavaScriptでファイル拡張子を取得するその他の方法

2024-04-07

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

String.prototype.split() と String.prototype.pop() を使う

これは、最もシンプルで効率的な方法の一つです。以下のコードのように、ファイル名をピリオドで分割し、最後の要素を取得します。

const filename = "image.png";
const extension = filename.split('.').pop();

console.log(extension); // "png"

path.parse() を使う

Node.js では、path モジュールが提供されています。このモジュールの path.parse() 関数は、ファイルパスからさまざまな情報を取得することができます。

const path = require('path');

const filename = "image.png";
const parsedPath = path.parse(filename);

console.log(parsedPath.ext); // ".png"

正規表現を使って、ファイル名から拡張子を取得することもできます。以下のコードは、ファイル名の末尾にあるピリオドと拡張子を抽出します。

const filename = "image.png";
const extension = filename.match(/\.([^\.]+)$/)[1];

console.log(extension); // "png"

ファイルAPIを使う

ブラウザの File API を使って、ファイルオブジェクトから拡張子を取得することができます。

const file = document.getElementById('file').files[0];
const extension = file.name.split('.').pop();

console.log(extension); // "png"

Node.js で開発している場合は、path.parse() を使うと便利です。
より柔軟な方法が必要場合は、正規表現を使うことができます。
ブラウザ上でファイル拡張子を取得したい場合は、ファイルAPIを使う必要があります。

ファイル拡張子は、ピリオド(".") の後に続く文字列です。
ファイル拡張子は、ファイルの種類を表すために使われます。
例えば、".png" は PNG 画像ファイルを表す拡張子です。

補足

上記の方法以外にも、ファイル拡張子を取得する方法はいくつかあります。詳細は、上記の参考資料などを参照してください。

const filename = "image.png";
const extension = filename.split('.').pop();

console.log(extension); // "png"

const path = require('path');

const filename = "image.png";
const parsedPath = path.parse(filename);

console.log(parsedPath.ext); // ".png"

正規表現を使う

const filename = "image.png";
const extension = filename.match(/\.([^\.]+)$/)[1];

console.log(extension); // "png"

const file = document.getElementById('file').files[0];
const extension = file.name.split('.').pop();

console.log(extension); // "png"

実行方法

上記のコードを、JavaScriptファイルに保存します。そして、ブラウザで開くか、Node.js で実行します。

出力結果

png
.png
png
png

上記のコードは、あくまでもサンプルです。実際の使用例に合わせて、コードを修正する必要があります。

JavaScriptでファイル拡張子を取得するその他の方法

URL.createObjectURL() と FileReader を使う

この方法は、ブラウザ上でファイル拡張子を取得する場合に便利です。

const file = document.getElementById('file').files[0];
const url = URL.createObjectURL(file);

const reader = new FileReader();
reader.onload = function() {
  const extension = this.result.match(/\.([^\.]+)$/)[1];

  console.log(extension); // "png"
};
reader.readAsDataURL(file);

File.prototype.webkitRelativePath を使う

const file = document.getElementById('file').files[0];
const extension = file.webkitRelativePath.match(/\.([^\.]+)$/)[1];

console.log(extension); // "png"

第三者のライブラリを使う

file-extension や js-file-extension などの第三者のライブラリを使うと、簡単にファイル拡張子を取得することができます。

import fileExtension from 'file-extension';

const filename = "image.png";
const extension = fileExtension(filename);

console.log(extension); // "png"