JavaScriptにおける数値⇔文字列の型変換あれこれ

気になったら即調べるが吉、ということで。

数値→文字列

var num = 123;

// わかりやすい
String(num); // "123"
num.toString(10); // "123"

// この用途では使ったこと無い
num.toFixed() // "123"

// なるほど
num + ''; // "123"

文字列→数値

var str = '123';

// わかりやすい
Number(str); // 123
parseInt(str, 10); // 123
parseFloat(str); // 123

// なるほど
str - 0; // 123
str * 1; // 123
str / 1; // 123

// すっきりやけど知らん人は読めない
+str; // 123
-(-str); // 123
~~str; // 123
str&-1; // 123
str|0; // 123
str^0; // 123
str>>0; // 123
str<<0; // 123

// 使っちゃダメってばっちゃが言ってた
// eval(str) // 123

ありがちなpx→数値変換

var px = '123px';

Number(px); // NaN
parseInt(px, 10); // 123
parseFloat(px); // 123

px - 0; // NaN
px * 1; // NaN
px / 1; // NaN

+px; // NaN
~~px; // 0

// eval(px) // SyntaxError: Unexpected token ILLEGAL

// 番外
px.substr(0, px.length-2); // 123
px.split('px')[0]; // 123

せっかく関数用意してあるんやから、大人しくそれ使っとけってことですね。
後から読んでもわかりやすいし。

先頭に0がある文字列→数値変換

var str = '0123';

Number(str); // 123
parseInt(str, 10); // 123
parseFloat(str); // 123

str - 0; // 123
str * 1; // 123
str / 1; // 123

+str; // 123
~~str; // 123
str|0; // 123

eval(str) // 83

evalとはここで別れましょう・・。

先頭に半角スペースがある文字列→数値変換

var str = ' 123';

Number(str); // 123
parseInt(str, 10); // 123
parseFloat(str); // 123

str - 0; // 123
str * 1; // 123
str / 1; // 123

+str; // 123
~~str; // 123
str|0; // 123

eval(str) // 123

空白はあってないものらしい。

1年経ってみての感想

20140624: なにげにアクセス数があるみたいなので、今のきもちを追記。

文字列→数値なら

'123'|0; // 123

ってすることが多いかなー。
やっぱりすっきり書けるのが良いですね。
ただ小数点が入っちゃうと挙動が変わってくるので注意。

'123.5'|0; // 123

+'123.5'; // 123.5

数値→文字列なら

''+123; // "123"

かなー。
正直こんなことする機会ないですね。