Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【JavaScript】明示的に型変換をする!

More than 1 year has passed since last update.

一般的な型変換よりは冗長になるかもしれませんが、確実に型変換する方法を紹介します。

STEP1 : new 演算子を使って変換

JavaScriptでは new Numbernew String といった方法で文字列や数値を生成することができます。

構文

わざわざ載せる必要はないと思いますが一応

example.js
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();
}

実行速度への影響

実行速度を簡易的に比較しました。
特に環境を整えたわけではないし、ソースコードも対照実験できるようなものではないので、参考程度にどうぞ。

実験方法

コード1
const hoge = "1";
new Number(hoge).valueOf();
コード2
const hoge = "1";
hoge - 0;
コード3
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 でいいよね


  1. インスタンス newで生成された実体のことです。 

  2. プリミディブ値 語弊はありますが、「値そのもの」などと解釈すればいいです。正しく知りたい人は個人で検索してください。 

  3. オペランド 式の演算子ではないほう。変数や数値のことです。 

kobotyann
HTML,JavaScript,CSSを中心にやってます。 Scratchが初めて触った言語で、現在もやってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away