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

連載目次へ

以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分）

<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...

連載目次へ