JavaScriptは動的型付けを採用した言語であるため、実行するまで変数の型が分からない状態になります。
この特徴により、数値計算を行う時を以下のような問題を引き起こすことがあります。
・加算を行うつもりが文字列結合になってしまう
（例えば、100 + “100” は “100100”になる）
・計算結果がNaNになってしまう
（例えば、カンマ等を含むString型をNumber()でNumber型に変換しようとした場合）
・桁が途中で落ちてしまう
（例えば、カンマ等を含むString型をparseInt()でNumber型に変換しようとした場合）
これらの問題は、計算に使おうと思っていた変数がString型であり、そのString型を正しくNumber型に変換できていないことに起因します。
これらの問題は、以下のようなコードにより変数をNumber型に正しく変換することで、回避することができます。
【コード】
|
1 |
Number(input.toString().replace(/［^0-9\.］/g, '')); |
【サンプルの実行結果】
・inputが整数のNumber型
|
1 2 3 |
var input = 1234; var output = Number(input.toString().replace(/［^0-9\.］/g, '')); console.log(output); // 1234 |
・inputが小数のNumber型
|
1 2 3 |
var input = 1234.5; var output = Number(input.toString().replace(/［^0-9\.］/g, '')); console.log(output); // 1234.5 |
・inputが整数のString型
|
1 2 3 |
var input = "1234"; var output = Number(input.toString().replace(/［^0-9.］/g, '')); console.log(output); // 1234 |
・inputが小数のString型
|
1 2 3 |
var input = "1234.5"; var output = Number(input.toString().replace(/［^0-9\.］/g, '')); console.log(output); // 1234.5 |
・inputがカンマを含むのString型
|
1 2 3 |
var input = "1,234"; var output = Number(input.toString().replace(/［^0-9\.］/g, '')); console.log(output); // 1234 |
【解説】
・Number型に含まれる文字は”0-9″と”.”のみなので、それ以外の文字はreplace関数により削除する。
・replace関数は変数がString型でないと使用できないので、変数を事前にtoString関数によりString型に変換する（変換する代わりに型を判定する分岐を入れて処理を分けても良い）。
今回も、実務の中で問題になったケースを記事にしました。
JavaScriptは動的型付けを採用した言語であるがゆえに、Javaのような静的型付けでは気を付ける必要がない点にも気を付けてコーディングする必要があります。