JavaScriptの動かないコード　(初級編)　parseIntで返り値が0になるエラー

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

やりたい事：

「２００８年１２月から何か月経ったか」を計算する。


<input type="button" value="期間を表示" onClick="f()">


月を選択してください。


 → ２００９年の

<select id="select_month">
	<option value="01">01</option>
	<option value="02">02</option>
	<option value="03">03</option>
	<option value="04">04</option>
	<option value="05">05</option>
	<option value="06">06</option>
	<option value="07">07</option>
	<option value="08">08</option>
	<option value="09">09</option>
	<option value="10">10</option>
	<option value="11">11</option>
	<option value="12">12</option>
</select> 

月。


<script language="JavaScript">

function f()
{
	var elem_select = document.getElementById( "select_month" );

	// 選択されている月を取得
	var str = elem_select.options[ elem_select.selectedIndex ].value;
	
	// 数値に変換
	var num = parseInt( str );
	
	// 経過月数を表示
	alert( "２００８年１２月からの経過月数は，" + num + "ヵ月です。" );
}

</script>

答え

01〜07 と，10〜12を選択したときはうまく動く。

しかし「08」と「09」を選択して実行すると，IEでもFirefoxでも「経過月数は，0ヵ月です」と表示される。

8と9だけ，文字列から数値にうまく変換できていない。

原因

JavaScriptでは，リテラルの先頭に0が付くと8進数とみなされる。

下記のコードを実行すると・・・

alert( 010 + 01 ); // 10 + 1 = 11 のつもり

11ではなく9と表示される。なぜなら

8進数の 010 は10進数では「8」
8進数の 01 は10進数では「1」

文字列の場合も同じ。

引用符で囲った中身が数字列で，

先頭が0〜であれば8進数

先頭が0x〜であれば16進数

となる。

冒頭のコードでは，桁揃えのために0埋めを行なっていたのが仇となった。

2桁の0埋めだと，00から99までの中で，戻り値がおかしくなるのは08と09のケースだけ。

これは発見されにくい。

ブラウザ上で01から12まで（つまり月）の入力を求めるような個所がある場合，テストケースとしては

境界値：01, 12

中間の値をいくつか（6とか）

をまず想定するだろう。

しかしさらに念のため，

意図しない8進数変換のせいで，"08"・"09"の解釈がバグを起こさないか？

というのも，テスト項目に加えたいところ。

なおコードの修正案としては，明示的に10進数として認識させるためにparseIntのオプションを指定して

	// 数値に変換
	var num = parseInt( str, 10 );

とすればよい。

参考：

parseIntの挙動（Javaとの仕様の違い）
http://blogs.wankuma.com/kox/archive/...
javascriptで8と9のときだけエラーになるってみんなが首をかしげているときがあって8進数になってたというオチのときがありましたね。
なんとなく桁をそろえようと頭に0をつけたのが運のつきｗ

Mozillaのサイト：整数
https://developer.mozilla.org/ja/Core...

整数
整数は 10 進数、16 進数、8 進数で表現可能です。10 進整数リテラルは先頭の 0（ゼロ）を除いた、数字の連続からなります。整数リテラルにおいて先頭の 0（ゼロ）はそれが 8 進数であるということを指します。先頭の 0x（または 0X）は 16 進数を指します。16 進整数は数字（0 から 9）と a から f および A から F のアルファベットからなります。8 進整数は 0 から 7 までの数字のみからなります。
8 進整数リテラルは廃止予定であり、ECMA-262 第 3 版から除かれています。JavaScript 1.5 では依然として後方互換のためにそれをサポートしています。

早く廃止してほしいような。

※関連するエントリー：

JavaScriptの動かないコード　(初級編)　数値判定の方法・・・入力値が有効な整数かどうかチェック
http://language-and-engineering.hatenablog.jp/entry/20080830/1220070507

JavaScriptの動かないコード　(初級編)　if文の分岐がおかしい
http://language-and-engineering.hatenablog.jp/entry/20080915/1221451639

連載目次へ