技術とか戦略とか

IT技術者が技術や戦略について書くブログです。

JavaScript:String型かNumber型かわからない変数をNumber型に置き換えるコード

JavaScriptは動的型付けを採用した言語であるため、実行するまで変数の型が分からない状態になります。
この特徴により、数値計算を行う時を以下のような問題を引き起こすことがあります。
 
・加算を行うつもりが文字列結合になってしまう
 (例えば、100 + "100" は "100100"になる)
 
・計算結果がNaNになってしまう
 (例えば、カンマ等を含むString型をNumber()でNumber型に変換しようとした場合)
 
・桁が途中で落ちてしまう
 (例えば、カンマ等を含むString型をparseInt()でNumber型に変換しようとした場合)
 
これらの問題は、計算に使おうと思っていた変数がString型であり、そのString型を正しくNumber型に変換できていないことに起因します。
 
これらの問題は、以下のようなコードにより変数をNumber型に正しく変換することで、回避することができます。
 
【コード】
Number(input.toString().replace(/[^0-9\.]/g, ''));
 
【サンプルの実行結果】
・inputが整数のNumber型
var input = 1234;
var output = Number(input.toString().replace(/[^0-9\.]/g, ''));
console.log(output); // 1234
 
・inputが小数のNumber型
var input = 1234.5;
var output = Number(input.toString().replace(/[^0-9\.]/g, ''));
console.log(output); // 1234.5
 
・inputが整数のString型
var input = "1234";
var output = Number(input.toString().replace(/[^0-9\.]/g, ''));
console.log(output); // 1234
 
・inputが小数のString型
var input = "1234.5";
var output = Number(input.toString().replace(/[^0-9\.]/g, ''));
console.log(output); // 1234.5
 
・inputがカンマを含むのString型
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型に変換する(変換する代わりに型を判定する分岐を入れて処理を分けても良い)。