JavaScriptで文字列を数値化する方法というのはいろいろありますが、それぞれ微妙な違いや予想外の動作をすることがあります。個人的によく使うのは『N-0』という方法なのですが、先日予想外な動きになって困りました。
ということで、今回はJavaScriptでの数値化方法について。ありがちなエントリーなので、検索したら他のブログでも書いてる人がいました(参考：JavaScriptにおける数値⇔文字列の型変換あれこれ – console.lealog();、たまにメモる。: JavaScriptにおける数値と文字列の相互変換)。
そんなこと気にしてたらブログなんて書けないので、とりあえず書きます。まずは下記のような関数を作ることに。
function outputDigitizing(arg){
console.log("Number(N):" + Number(arg));
console.log("parseInt(N, 10):" + parseInt(arg, 10));
console.log("parseFloat(N):" + parseFloat(arg));
console.log("N-0:" + (arg-0));
console.log("+N:" + (+arg));
console.log("N|0:" + (arg|0));
console.log("~~N:" + (~~arg));
}
引数で得た値を数値化したものをコンソールに出力するという処理となっています。とりあえず、7種類用意してみました。ついでに上記関数を実行するテキストボックスとボタンもおいておきます。
例えば、上記のテキストボックスに”100″と入れて実行ボタンを押した結果は以下。
Number(N):100 parseInt(N, 10):100 parseFloat(N):100 N-0:100 +N:100 N|0:100 ~~N:100
うまくいったようです。
では、他にもいろいろ試してみましょう。例えば、小数点。『outputDigitizing(‘3.14’)』とした結果は以下。
Number(N):3.14 parseInt(N, 10):3 parseFloat(N):3.14 N-0:3.14 +N:3.14 N|0:3 ~~N:3
parseIntとN|0、~~Nは整数になってしまいました(そりゃそうだろと突っ込まれそうですが)。
つづいて、『outputDigitizing(‘100px’)』
Number(N):NaN parseInt(N, 10):100 parseFloat(N):100 N-0:NaN +N:NaN N|0:0 ~~N:0
parseIntとparseFloat以外はうまくいってません(N|0と~~Nは0となっていますが、全くもって数値ではない文字列をいれても0となります)。ちなみにNaNというのは『Not a Number』(数値じゃない)の略です。
つづいて、自分がはまった『outputDigitizing(”)』、つまり空文字です。
Number(N):0 parseInt(N, 10):NaN parseFloat(N):NaN N-0:0 +N:0 N|0:0 ~~N:0
予想はNaNとなるだろうと思ってました。しかし実際にはparseIntとparseFloat以外は0となってしまっています。さらにいえば、isNaN(”)はfalseを返し、isFinine(”)はtrueを返してしまうのです。この動きは困りました。テキストボックスの判定で、絶対に数値が入っていなきゃいけないという判定処理をしようとしたら、空文字は通っちゃったんですから・・・。
ただ、そこでふと思ったわけです。nullとかundefinedとかtrueとかfalseとかの特別な値だとどうなるのだろうと。というわけで、以下それぞれを試してみた結果です。
> outputDigitizing(null) Number(N):0 parseInt(N, 10):NaN parseFloat(N):NaN N-0:0 +N:0 N|0:0 ~~N:0 > outputDigitizing(undefined) Number(N):NaN parseInt(N, 10):NaN parseFloat(N):NaN N-0:NaN +N:NaN N|0:0 ~~N:0 > outputDigitizing(true) Number(N):1 parseInt(N, 10):NaN parseFloat(N):NaN N-0:1 +N:1 N|0:1 ~~N:1 > outputDigitizing(false) Number(N):0 parseInt(N, 10):NaN parseFloat(N):NaN N-0:0 +N:0 N|0:0 ~~N:0
結果としては、parseIntとparseFloatはすべてNaNとなりましたが、それ以外の方法では、nullとfalseが0、trueが1、undefinedがNaNとなりました。
ここでふと、もしかして比較演算子の==でtrueとなる組み合わせということなんじゃないかと思い、コンソールで試してみました。
> 0==false true > 1==false false > 1==true true > 2==true false > 0==null false
falseとtrueに関しては予想通りでしたが、予想に反して0==nullはtrueではなく、falseでした・・・。
JavaScriptは奥が深いです。
コメント