JavaScriptで空文字を判定する3つの方法と実用例 – JPSM

JavaScriptで空文字を判定する3つの方法と実用例

JavaScriptで空文字を判定するイメージJS

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

また、理解しにくい説明や難しい問題に躓いても、JPSMがプログラミングの解説に特化してオリジナルにチューニングした画面右下のAIアシスタントに質問していだければ、特殊な問題でも指示に従い解決できるように作ってあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptで空文字を判定する方法をマスターできるようになります。

空文字の判定方法は、プログラムのロジックを実装する上で非常に重要です。

この記事では、空文字の判定方法を3つ紹介し、実用例とサンプルコードも提供します。

初心者の方でも分かりやすい説明を心がけていますので、ぜひ最後までお読みください。

●空文字判定の基本

JavaScriptで空文字を判定する方法はいくつかありますが、ここでは主要な3つの方法を紹介します。

○判定方法1:===演算子

最もシンプルな方法は、===演算子を使って空文字と比較することです。

const str = "";
if (str === "") {
  console.log("空文字です");
}

このコードでは、変数strが空文字かどうかを判定しています。

空文字であれば、コンソールに「空文字です」と表示されます。

○判定方法2:lengthプロパティ

文字列のlengthプロパティを使って、文字列の長さが0であるかどうかを判定することもできます。

const str = "";
if (str.length === 0) {
  console.log("空文字です");
}

このコードでは、変数strの文字列の長さが0であるかどうかを判定しています。

0であれば、コンソールに「空文字です」と表示されます。

○判定方法3:trimメソッド

空白文字も含めて空文字と判定したい場合は、trimメソッドを使うことができます。

trimメソッドは、文字列の両端の空白文字を削除します。

const str = "  ";
if (str.trim().length === 0) {
  console.log("空文字です");
}

このコードでは、変数strの文字列の両端の空白文字を削除した後、長さが0であるかどうかを判定しています。

0であれば、コンソールに「空文字です」と表示されます。

●空文字判定の実用例

空文字の判定方法は、様々な場面で役立ちます。

次に3つの実用例とサンプルコードを紹介します。

○サンプルコード1:入力フォームのバリデーション

入力フォームで必須項目が空文字でないことを確認するバリデーションを実装する場合に、空文字判定が役立ちます。

function validateForm() {
  const inputField = document.getElementById("inputField");
  const inputValue = inputField.value;

  if (inputValue.trim().length === 0) {
    alert("入力が必要です");
    return false;
  }

  return true;
}

このコードでは、入力フォームの値が空文字であるかどうかを判定しています。

空文字であれば、アラートで「入力が必要です」と表示されます。

○サンプルコード2:空白文字の削除

文字列から空白文字を削除する処理を行う場合にも、空文字判定が活用できます。

function removeWhitespace(str) {
  return str.split(" ").filter(word => word.length !== 0).join(" ");
}

const stringWithWhitespace = "  Hello   World  ";
const stringWithoutWhitespace = removeWhitespace(stringWithWhitespace);
console.log(stringWithoutWhitespace); // "Hello World"

このコードでは、空白文字を削除するremoveWhitespace関数を定義しています。

空白文字を含む文字列から空白文字を削除した結果がコンソールに表示されます。

○サンプルコード3:連続空白文字の削除

連続する空白文字を1つの空白文字にまとめる処理を行う場合にも、空文字判定が活用できます。

function removeConsecutiveWhitespace(str) {
  return str.split(/\s+/).filter(word => word.length !== 0).join(" ");
}

const stringWithConsecutiveWhitespace = "  Hello   World  ";
const stringWithoutConsecutiveWhitespace = removeConsecutiveWhitespace(stringWithConsecutiveWhitespace);
console.log(stringWithoutConsecutiveWhitespace); // "Hello World"

このコードでは、連続する空白文字を削除するremoveConsecutiveWhitespace関数を定義しています。

連続する空白文字を含む文字列から連続する空白文字を削除した結果がコンソールに表示されます。

●注意点と対処法

空文字判定を行う際の注意点として、nullやundefinedといった値が渡された場合のエラーが挙げられます。

これらの値が渡されると、lengthプロパティやtrimメソッドが使用できず、エラーが発生します。

そのため、事前にnullやundefinedのチェックを行うことが重要です。

function isEmpty(str) {
  if (str == null || typeof str === "undefined") {
    return true;
  }

  return str.trim().length === 0;
}

このコードでは、isEmpty関数がnullやundefinedをチェックしています。

nullやundefinedが渡された場合は、空文字と判定されます。

まとめ

この記事では、JavaScriptで空文字を判定する3つの方法と実用例を紹介しました。

空文字の判定方法は、様々な場面で役立つため、ぜひマスターしておきましょう。