【JavaScript】空白をチェックする方法まとめ！空文字・空白のみ・空白を含む場合を完全解説！

JavaScriptで文字列を扱っていると、次のような場面によく遭遇すると思います。

• 入力欄に「何も入力されていないか」を判定したい
• 入力欄に「空白だけ入力されていないか」を判定したい
• 「文字列の途中に空白が含まれているか」を判定したい

この記事では、「JavaScriptで空白をチェックする代表的な4つの方法」を用途別にわかりやすく解説します。

空文字・空白のみ・空白を含む文字列の違い

JavaScriptで入力チェックを行う際、「何も入力されていない状態（空文字の状態）」と「空白だけが入力されている状態」さらに「文字列の途中に空白が含まれている状態」はすべて意味が異なります。

まずは、それぞれの違いを以下にまとめます。

• 何も入力されていない状態（空文字の状態）：""
• 空白だけが入力されている状態：" " や "　"
• 文字列の途中に空白が含まれている状態："hello world"

見た目は似ていても、チェック方法を誤ると意図しないバリデーションエラーや不具合につながるため注意が必要です。

空白のみかどうかを判定（trim()を使う）

「空白だけが入力されているか」を判定したい場合、最もよく使われるのがtrim()を使った方法です。

trim()は文字列の前後の空白をすべて削除します。その結果が空文字""であれば、「空白のみ」と判断できます。

const value = "   ";

const isOnlyWhitespace = value.trim() === "";

console.log(isOnlyWhitespace); // true

半角スペース・全角スペース・改行（\n）やタブ（\t）をまとめて判定できるため、フォーム入力チェックで非常によく使われる方法です。実際にさまざまな文字列を判定すると、次のような結果になります。

空白のみを厳密に判定したい場合（空文字は除外）

「空白だけの入力はNGにしたいが、未入力（空文字）は別扱いにしたい」というケースもよくあります。その場合は、空文字でないことを先にチェックすることで対応できます。

const value = "   ";

const isOnlyWhitespaceStrict = value !== "" && value.trim() === "";

console.log(isOnlyWhitespaceStrict); // true

この条件では、

• "" → false
• " " → true

と、未入力と空白入力を正確に区別できます。

実際にさまざまな文字列を判定すると、次のような結果になります。

空白が含まれているかどうかを判定（includes()を使う方法）

文字列の中に「半角スペースが含まれているか」をシンプルに判定したい場合はincludes()が便利です。

const value = "hello world";

const hasSpace = value.includes(" ");

console.log(hasSpace); // true

なお、この方法で検出できるのは半角スペース" " のみです。タブや改行、全角スペースは検出されない点に注意してください。

実際にさまざまな文字列を判定すると、次のような結果になります。

空白（スペース・タブ・改行）が含まれているかどうかを判定（正規表現を使う方法）

「スペース・タブ・改行など、あらゆる空白文字が含まれているか」を調べたい場合は正規表現を使う方法が最適です。

const value = "hello\tworld";

const hasWhitespace = /\s/.test(value);

console.log(hasWhitespace); // true

\sは空白文字全般を表す正規表現です。

つまり、この方法は「空白文字全般が1つでも含まれているか」をチェックしたい場合に最適です。

実際にさまざまな文字列を判定すると、次のような結果になります。

本記事のまとめ

この記事では『JavaScriptで文字列の空白をチェックする方法』について、用途別に代表的な判定方法を解説しました。

「空文字なのか」「空白だけなのか」「空白文字が含まれているのか」は見た目が似ていてもチェック方法が異なるため、目的に応じて使い分けることが重要です。

最後に、用途別のおすすめ方法を整理しておきます。

入力チェックやフォームバリデーションを実装する際は、本記事の内容を参考に、状況に合った方法を選んでみてください。

最後までお読みいただき、ありがとうございました。