スポンサーリンク

JavaScriptの動かないコード (初級編) if文の分岐がおかしい


以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分)

<select id="my_select">
	<option value=1>有り</option>
	<option value=0>無し</option>
</select>

<input type="button" onClick="f()" value="判定">

<script language="JavaScript">
function f()
{
	// valueを取得
	var i = my_select.options[ my_select.selectedIndex ].value;

	// 1なら真
	if( i )
	{
		alert( "有りが選択されました。" );
		// 有りの場合の処理
	}
	else
	{
		alert( "無しが選択されました。" );
		// 無しの場合の処理
	}
}
</script>




答え



上のコードでは,セレクトボックスで「有り」「無し」のどちらが選択されていても,if文では「有り」の場合の分岐に入る。
つまり,i は常に true に変換される。


セレクトボックスのoptionで,

value=0

と書いている。しかし,これは実際には

value="0"

のように,文字列として解釈される。


文字列を論理型(ブール値)に変換する際,"0" はfalseにならない。数値の 0 はfalseになるが,"0"はだめである。



文字列がfalseに変換されるのは,文字列が "" (空文字列)の場合に限る。文字列が中身を持っている場合は,中身の内容にかかわらず true になる。
(NaN や undefined もfalseと解釈される。)

解決法としては、 i = parseInt( i ); として,数値に直してから評価すれば修正できる。



上記は恐らく,普段のコーディングでは間違えない初歩的な点だろう。

しかしこのミスをつい誘発しそうな状況がある。


例えば上の例のように,HTMLの属性が value=0 のように引用符なしで記述されていて,うっかり文字列であることを忘れてしまう場合。 (→ふだんから引用符を付けるべき。)


あるいは,DB中では数値として保存されている変数を,cgiなどでHTML中に表示して,その値をJavaScriptから読み込む場合。
うっかり,この変数はJavascriptでも当然数値型だという思い込みを持ってしまう可能性がある。
下記のような例。

<input type=hidden id=my_hidden value=<?php echo $number; ?> >

<script>
   // 数値をboolに変換
   alert( !! my_hidden.value );
</script>

変数を論理型に変換するためには,変数の前に !! を付ければよい。

この場合,PHP側で $number の値に 0 が入っていようが,1 が入っていようが,値がセットされていればとにかくjavascriptの出力は true である。




JavaScriptにおいてどのような型キャストが行なわれるかの一覧は,下記のサイトに詳しい。
http://www.kawa.net/works/js/learn/ba...