JavaScriptで文字列パスからファイル名を抽出する方法

文字列として渡されたファイルパスからファイル名を取得する関数を作成する必要があります。通常、ファイル名はパスの一番最後に位置しています。正規表現を使って解決することも可能ですが、JavaScriptのsplit()メソッドを使えば、よりシンプルな一行の解決策を実現できます。本記事では、その方法を詳しく解説します。

例として、次のようなファイルパスを考えてみましょう。

/app/base/controllers/filename.js

実装例

以下のコードは、文字列パスからファイル名を取得するものです。

const filePath = "/app/base/controllers/filename.js";

const extractFilename = (path) => {
  const pathArray = path.split("/");
  const lastIndex = pathArray.length - 1;
  return pathArray[lastIndex];
};

console.log(extractFilename(filePath));

このコードの仕組みはシンプルです。まずsplit("/")メソッドでパスをスラッシュ区切りで配列に分割し、配列の最後の要素（インデックスはlength - 1）を返すことで、ファイル名だけを取り出しています。

出力結果

このコードを実行すると、コンソールには次のように表示されます。

filename.js

補足：pop()メソッドでさらに簡潔に書く

コードをさらに短くしたい場合は、配列のpop()メソッドを使って最後の要素を直接取得する方法も便利です。

const extractFilename = (path) => {
  return path.split("/").pop();
};

console.log(extractFilename("/app/base/controllers/filename.js")); // filename.js

また、Windows形式のパス（バックスラッシュ区切り）にも対応したい場合は、split()メソッドに正規表現/[\/\\]/を渡すことで、スラッシュとバックスラッシュのどちらの区切り文字にも対応できるようになります。