JavaScript

JavaScriptのendsWith():文字列の末尾を判定してファイル名を分類する

この記事でわかること

String.prototype.endsWith()で文字列の末尾を判定する方法を解説。引数・戻り値、ブラウザーとNode.jsの実行手順、ファイル名の分類例、終了位置の指定や例外の注意点を学べます。

目的:指定した文字列で終わるか調べる

ファイル名の一覧からCSV形式の名前を選ぶとき、文字列の途中に拡張子が含まれるだけでは不十分です。たとえば、report.csv.bakは.csvを含みますが、末尾は.bakです。

String.prototype.endsWith()は、文字列が指定した文字列で終わるかを判定します。検索位置を自分で計算する必要がなく、コードに「この末尾かどうか」という意図を直接表せます。本記事では、このAPIを使ってファイル名を分類し、入力の型や大文字・小文字の扱いまで整理します。

ここで扱うのは名前の文字列です。ファイルの読み込みや内容の検査は行いません。

動作環境と対応バージョン

2026年11月12日時点で確認したMDNの公式リファレンスでは、endsWith()は2015年9月以降、ブラウザー間で広く利用できる機能とされています。現在のChrome、Edge、Firefox、Safariで利用できます。古いブラウザーや組み込みWebViewでは、利用前に機能の有無を確認してください。

ブラウザー専用のAPIではないため、Node.jsでも動作します。本記事のNode.js向け手順は22系以降を対象とします。これは記事で扱う実行環境の範囲であり、APIの初搭載バージョンを示すものではありません。追加パッケージや実験用フラグは不要です。

Node.jsがJavaScriptの機能を取り込む仕組みは、Node.js公式のECMAScript解説で説明されています。サンプルはDOMに依存しないため、ブラウザーとNode.jsで同じコードを使えます。

引数と戻り値

基本の呼び出し方は次のとおりです。

JavaScript
"report.csv".endsWith(".csv");
"report.csv.bak".endsWith(".csv", 10);
  • 第1引数のsearchStringには、末尾で一致させたい文字列を渡します。
  • 第2引数のendPositionは省略可能です。判定対象の終わりを、先頭からの長さで指定します。省略すると文字列全体が対象です。
  • 戻り値は、一致すればtrue、一致しなければfalseです。
  • 元の文字列は変更しません。

大文字・小文字は区別されます。したがって、"REPORT.CSV".endsWith(".csv")はfalseです。また、空文字列を検索するとtrueになります。検索条件を利用者に入力させる場合は、空欄を許可するか先に決めておきましょう。

第1引数には正規表現を渡せません。通常の正規表現を渡すとTypeErrorになります。引数の詳しい定義はMDN日本語版でも確認できます。

終了位置は最後の文字の添字ではない

"report.csv.bak"では、先頭10文字が"report.csv"です。そこで第2引数に10を指定すると、その位置までを対象として末尾を判定できます。

JavaScript
(() => {
  const name = "report.csv.bak";
  console.log(name.endsWith(".csv"));
  console.log(name.endsWith(".csv", 10));
  console.log(name.endsWith(".csv", 9));
})();

期待出力は次のとおりです。

CODE
false
true
false

10は最後に含める文字の添字ではなく、その次の位置です。9を指定すると判定対象は"report.cs"になるため、一致しません。終了位置を変えても、元の名前から.bakが削除されるわけではありません。

実践:CSVファイル名を分類する

以下はそのままコピーできる自己完結した例です。大文字の拡張子も受け入れますが、末尾の空白は取り除きません。入力を勝手に修正せず、渡された名前に対して判定する方針です。

JavaScript
(() => {
  "use strict";

  if (typeof String.prototype.endsWith !== "function") {
    console.log("この環境はendsWith()に対応していません");
    return;
  }

  function isCsvName(value) {
    if (typeof value !== "string") {
      return false;
    }

    return value.toLowerCase().endsWith(".csv");
  }

  const names = [
    "report.csv",
    "REPORT.CSV",
    "report.csv.bak",
    "report.csv ",
    "notes.txt",
    null,
  ];

  for (const name of names) {
    const label = JSON.stringify(name);
    console.log(`${label}: ${isCsvName(name)}`);
  }
})();

期待出力は次のとおりです。

CODE
"report.csv": true
"REPORT.CSV": true
"report.csv.bak": false
"report.csv ": false
"notes.txt": false
null: false

isCsvName()は文字列以外をfalseとして扱います。型を確認してからメソッドを呼ぶので、nullによる例外を防げます。大文字・小文字を同一視する処理は、endsWith()自体の機能ではなく、この関数が追加した方針です。

末尾に空白がある名前はfalseです。入力フォームで前後の空白を無視したいなら、その整形を判定前に明示的に追加します。一方、実際のファイル名を扱う場面では、空白も名前の一部として保存されている可能性があります。どちらを採るかはデータの意味から判断してください。

ブラウザーで実行する

Chromeなどで通常のWebページを開き、開発者ツールのConsoleを表示します。上のJavaScriptコード全体を貼り付けて実行すると、6行の判定結果が表示されます。

外側の関数は、その場で呼び出す形になっています。このため、同じConsoleで繰り返し実行しても、サンプル内の変数が前回の宣言と衝突しにくくなります。Consoleが評価結果として最後にundefinedを表示する場合がありますが、それは6行のログとは別の表示です。

Node.jsで実行する

Node.jsを導入した環境で、上のJavaScriptコードをUTF-8のends-with-demo.cjsとして保存します。ターミナルで保存先のフォルダーを開き、次のコマンドを実行します。

Shell
node --version
node ends-with-demo.cjs

最初のコマンドで22系以降であることを確認します。次のコマンドで、ブラウザーと同じ6行が出力される想定です。nodeが見つからない場合は、Node.jsの導入とコマンドの検索パスを確認してください。

ファイルを引数に指定する実行方法は、Node.js公式のコマンドライン実行ガイドに沿っています。ネットワーク通信やファイルの読み込みはありません。

失敗例と制約

正規表現と空の条件に注意する

次の例も、ブラウザーのConsoleまたは別の.cjsファイルで実行できます。

JavaScript
(() => {
  console.log("report.csv".endsWith(""));
  console.log("value-undefined".endsWith());

  try {
    "report.csv".endsWith(/\.csv$/);
  } catch (error) {
    console.log(error.name);
  }
})();

期待出力は次のとおりです。

CODE
true
true
TypeError

第1引数を省略すると、空文字列ではなく"undefined"が検索対象になります。設定値をそのまま渡すと意図しない結果になるため、検索条件は文字列かつ空でないことを呼び出し側で確認すると扱いやすくなります。

このAPIは同期処理です。Promiseを返さないため、awaitや非同期の例外処理は必要ありません。上の失敗例では、正規表現による同期例外だけをtry...catchで捕捉しています。

拡張子の一致は内容の保証にならない

endsWith()は文字列の末尾だけを見ます。".csv"という名前も、今回のisCsvName()ではtrueになります。空でない本体名を必須にしたいなら、名前の長さなどを別の条件として追加してください。

また、https://example.com/report.csv?download=1の末尾は.csvではありません。URL全体とファイル名は異なる入力なので、URLを扱う処理では先にパス部分を取り出す設計が必要です。

アップロードされたデータが本当にCSVとして読めるかは、名前だけでは判断できません。ファイル名による分類と、内容を解析する処理は、それぞれの目的に応じて実装します。

活用事例と改善の進め方

endsWith()は、CSV候補の表示、バックアップ名の振り分け、ログ名の接尾辞チェックなど、末尾に明確な規則がある場面に向いています。固定の文字列を比較するだけなら、検索パターンを組み立てずに済むため、条件を読み取りやすくできます。

実装時は、まず大文字・小文字を区別するか、空白を保持するか、文字列以外をどう扱うかを決めます。その後、通常名、大文字名、追加の拡張子、空文字列、nullを入力して、方針どおりかを確認してください。

改善案として、今回のisCsvName()を画面表示とバッチ処理で共有すると、分類条件の食い違いを減らせます。ただし、関数名や説明には「ファイルの内容を検証する機能」と誤解されない表現を選びましょう。

公式参考資料

以下の公式本文を参照しました。掲載した期待出力は、仕様とコードを照合して導いたもので、実機での実行結果ではありません。

PREFERRED SOURCES

Googleの優先するニュース提供元にSEの部屋を追加

Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。

Googleの設定画面で確認する 新しいタブで開きます

候補にSEの部屋が表示されない場合は、まだ追加できません。

y.
WRITTEN BY

y_ymo10

SEの部屋で、HTML・CSSからJavaScript・React・Next.jsまで、Web制作の開発ノートを公開しています。

ほかの開発ノートを読む →