JavaScriptで空判定する方法

JavaScriptで空判定する方法です。

• 必須項目に入力があれば送信できる
• 生年月日を入力したら現在の年齢を表示する
• メールアドレスを入力したらメールアドレスの形式チェックをする

といったことに使えます。

基本的な操作方法ですが、もし他の言語を既に勉強されている方であれば微妙に挙動が異なったりするので注意しましょう。

JavaScriptで空判定する方法

JavaScriptでは変数をそのまま if の条件に突っ込むだけで空判定ができます。

何か入力があれば true で、入力が無ければ false になります。

var value = $('#item').val();
if (value) {
  // 空で無い
} else {
  // 空
}

色々な値で検証してみましょう。

値	結果
undefined	false
null	false
“”(空文字)	false
true(真偽値)	true
false(真偽値)	false
0	false
1	true
-1	true
“あいう”(文字列)	true

実際に動かしてみたらこうなりました。

だいたい想定通りだと思います。

だけど、0が入力された場合って、0でも入力されてるんだからOKの場合もありますよね？

その場合は条件を1個追加して0の場合はOKにしてください。

「他にもこんな値はどうなるか？」みたいなのあれば連絡ください。

NULL判定のみ行う

undefinedや空文字はOKやけど、NULLはダメ！って場合もあるかもしれません。

そんなときは個別に判定を行います。

var value = $('#item').val();
if (value === null) {
  // null
} else {
  // nullでない
}

この場合、空文字やundefined、0やtrueでもfalseになります。

nullの場合にtrueになります。

ちなみに

value === null

の部分の === を == (イコール2つ)にすると、undefinedの場合もtrueになります。

空文字判定のみ行う

空文字判定だけ行う場合は == で行います。

var value = $('#item').val();
if (value == "") {
  // 空文字
} else {
  // 空文字でない
}

この場合、nullやundefinedに限らず0やtrueでもfalseになります。
空文字の場合だけtrueになります。

undefined判定のみ行う

undefinedの判定も === でできます。

var value = $('#item').val();
if (value === undefined) {
  // undefined
} else {
  // undefinedでない
}

実験してみましたが、問題無く undefined はtrueとなります。
null や 空文字 の場合は falseになります。

でも undefined という名前の変数を定義できてしまうことから上記のような書き方はあまりされないようです。（まあ、ぶっちゃけundefinedって名前の変数を作るプログラマーがただの雑魚ですけど。）

そんな関係で typeof を使って判定する方が一般的なようです。

var value = $('#item').val();
if (typeof value === "undefined") {
  // undefined
} else {
  // undefinedでない
}

undefinedを判定する場合は上記のように書いておけば、「なん・・・だと！こいつデキル！」って思われます！

まとめ

空判定は、基本的には if (変数) {…} でOK。

だけど、仕様的に異なる場合は個別にチェックする。