JavaScriptで変数がundefinedの場合のif文で判定する方法を3パターンご紹介します。
Contents
if文で判定結果を出力するCSSの記述
※if文の判定結果を出力する3パターン(.txt1、.txt2、.txt3)を用意しました。必要に応じて変更して下さい。
<style> body { font-size: 18px; text-align: center; } h1,h2{ text-align: center; font-size: 22px; line-height: 1.6em; padding-top: 20px; } h2{ font-size: 20px; padding-bottom: 30px; } div{ padding-bottom: 20px; } .txt1{ color: #007FFF; } .txt2{ color: #FF4D4D; } .txt3{ color: #FF9326; } </style>
変数がundefinedの場合のif文で判定するJavaScriptの記述
undefinedとなる変数「test1」を用意しました。
グローバル変数「undefined」と比較
※グローバル変数「undefined」と変数「test1」をif文で比較する。変数「test1」がundefinedの場合、ローバル変数「undefined」と比較すると一致します。ただし、グローバル変数「undefined」は変数なので書き換え可能なのであまりお勧めしません。
<script type="text/javascript"> var test1; if (test1 === undefined) { document.write('<div class="txt1">変数 test1 は '+test1+' です。 | グローバル変数 undefined と比較 | if (test1 === undefined) {~ </div>'); } </script>
typeofを使って文字列”undefined”と比較
※typeof演算子を使って変数の型を文字列として出力させます。変数「test1」がundefinedの場合「typeof test1」の出力結果は”undefined”という文字列が出力されます。それを利用します。
<script type="text/javascript"> var test1; if (typeof test1 === "undefined") { document.write('<div class="txt2">変数 test1 は '+test1+' です。 | 文字列 "undefined" と比較 | if (typeof test1 === "undefined") {~ </div>'); } </script>
nullと比較
※undefinedの変数「test1」の場合、if文でnullと比較すると一致します。ただし、変数「test1」がnullの場合も一致します。
<script type="text/javascript"> var test1; if (test1 == null) { document.write('<div class="txt3">変数 test1 は '+test1+' です。 | null と比較 | if (test1 == null) {~ </div>'); } </script>
正確に比較するなら「typeofを使って文字列”undefined”と比較」だと思いますが、正直どのパターンを使っても良いと思います。
JavaScriptで変数がundefinedの場合、if文で判定するデモページ
JavaScriptで変数がundefinedの場合、if文で判定するデモページ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告