一般的な型変換よりは冗長になるかもしれませんが、確実に型変換する方法を紹介します。
STEP1 : new 演算子を使って変換
JavaScriptでは new Number や new String といった方法で文字列や数値を生成することができます。
構文
わざわざ載せる必要はないと思いますが一応
new String(10); //文字列の10が返る。厳密にはString {"10"}が返る。
new Number("10"); //数値の10が返る。厳密にはNumber {10}が返る。
/* その他の new Number の挙動 */
new Number({hoge:"piyo"}); //NaNが返る。
new Number("fuga"); //NaNが返る。
new Number(undefined); //NaNが返る。
new Number の注意点
new Number(null);
これは 0 が返ります。null 値を一緒に扱う場合はハマりそうなポイントでもあるので注意してください。
STEP2 : 生成したインスタンスを値に変換
new String とか new Number で生成されたインスタンス1は厳密に言うとオブジェクトです。
(STEP1の例で「厳密にはString {"10"}が返る。」とか意味のわからないことを書いたのはそのためです)
そのため、 typeof などを使うと Object という結果が返ってきます。
やはり、それでは困ります。
じゃあ、どうするかというと・・・「valueOf」メソッドを利用して値に変換します。
valueOf はオブジェクトのプリミディブ値2を返すメソッドです。
new Number("10"); //Number {10} が返る。
new Number("10").valueOf(); //10が返る。
これを利用して、以下のようにするとインスタンスを数値や文字列に変換することができます。
let hoge = new Number("10"); //ここではまだNumber {10}
hoge = hoge.valueOf(); //ここで変換
console.log(hoge); //「数値」の10が出力される
valueOfを使わなくてもいい例
new Number に限りますが、new Number のインスタンスを演算子のオペランド3として扱う場合は自動的に valueOf の処理がされるので、絶対にSTEP2を踏まないといけないということはありません。
変換完了
この2ステップだけで簡単に型変換ができたと思います。
よく使う場合だと下のように関数化すると楽です。
function convertToString(value){
return new String(value).valueOf();
}
function convertToNumber(value){
return new Number(value).valueOf();
}
実行速度への影響
実行速度を簡易的に比較しました。
特に環境を整えたわけではないし、ソースコードも対照実験できるようなものではないので、参考程度にどうぞ。
実験方法
const hoge = "1";
new Number(hoge).valueOf();
const hoge = "1";
hoge - 0;
const hoge = "1";
function convertToNumber(value){
return new Number(value).valueOf();
}
convertToNumber(hoge);
この3つのコードを console.time("hoge"); と console.timeEnd("hoge"); に挟んで処理時間を比較する。
実験環境
Microsoft Edge 79.0.313.0 (公式ビルド) canary (64 ビット) です。
ユーザーエージェント : Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.0 Safari/537.36 Edg/79.0.313.0
結果
| コード1 | コード2 | コード3 | |
|---|---|---|---|
| 1回目 | 0.012939453125ms |
0.010986328125ms |
0.13671875ms |
| 2回目 | 0.014892578125ms |
0.009033203125ms |
0.070068359375ms |
| 3回目 | 0.022216796875ms |
0.01220703125ms |
0.0869140625ms |
| 4回目 | 0.015869140625ms |
0.01806640625ms |
0.095947265625ms |
| 5回目 | 0.01708984375ms |
0.009033203125ms |
0.08935546875ms |
となりました。
| コード1 | コード2 | コード3 | |
|---|---|---|---|
| 最早 | 0.012939453125ms | 0.009033203125ms | 0.070068359375ms |
| 最遅 | 0.022216796875ms | 0.01806640625ms | 0.13671875ms |
やはり、コード2が一番早いですね。
コード1はまだしもコード3は際立って遅いという結果になりました。
まとめ
よく使われる hoge - 0 見たいな方法よりは確実で、エラーも出にくい方法ですが、やはり遅いといえば遅いですね。
どちらを使うかはケースbyケースですね。大抵 hoge - 0 でいいよね
