Javascriptの型変換を徹底解説します!

今回の記事は、

  • Javascriptで型変換がうまくいかない
  • そもそも、Javascriptってどんな型があったっけ?

というお悩みをお持ちの方に向けた記事になっています。

Javascriptにも、文字列数値Booleanなど、様々な型が存在していますが、忘れてしまいがちなハマりポイントもたくさん存在しています。

一度覚えてしまえば、今後の開発の中で「ハッ」とすることも減ってくれると思いますので、ぜひこの機会にマスターしておきましょう。


Javascriptの型の種類

Javascriptの「型」は、大きく2つの種類に分類されます。

その2つの種類とは、「プリミティブ型」と「オブジェクト型」です。プリミティブ型とは数値や文字列などが含まれている型で、主に下記の7つが挙げられます。

  • 文字列
  • 数値
  • 論理値
  • 長整数
  • シンボル
  • undefined
  • null

また、プリミティブ型は実際に値を保持している根本的な単一の値であり、変数のなかにデータを保持する特性があります。さらに、値の受け渡し時は、値そのものが受け渡されるという特徴を持っています。

そして、前述した7種類を除き、すべてがオブジェクト型に分類されます。そのため、オブジェクト型は種類が豊富です。

例えば、オブジェクト型に該当するものとしては、下記の構成要素が挙げられます。 

  • Array(配列)
  • Function(関数)
  • Object(オブジェクト)
  • Date(日時)
  • StringやNumberなど

オブジェクト型の代表的な特徴としては、定義した変数には値が格納されている配列の場所(メモリアドレス)が格納されるということが挙げられます。

下表に、「プリミティブ型」と「オブジェクト型」の特徴をまとめます。

プリミティブ型の特徴オブジェクト型の特徴
・実値を保持している根本的な単一の値
・変数のなかにデータを保持する
・値の受け渡し時は値そのものが受け渡される
・変数にはメモリアドレスが格納される
・オブジェクトに関連付けられた変数はオブジェクトに含まれない
・オブジェクトとして宣言された変数にはそのオブジェクトを示すコピーはない
・値が変更されると配列自体の値が変更される
・参照先が同じ変数のすべてに影響する

Javascriptで型を変換してみよう

ここからは、Javascriptでの型変換で代表的な「文字列↔数値の変換」と真偽値であるBoolean型への変換について解説していきます。

文字列から数値への変換

まずは、文字列から数値への変換方法について、詳しくみていきましょう。

JavaScriptで扱う文字列や日付など、さまざまな値を数値に変換できますが、文字列から数値への型変換では「Number」がよく使われます。

基本的な使い方

「Number」の使い方は、以下のように数値に変換したい「値」を引数に指定するのが基本的な方法です。

Number(値)

文字列を数値に変換する場合、文字列が数字で構成された文字列は、下記のように文字列が表す数値に変換されます。

 '987' →  987

ただし、16進数形式の場合は10進数の数値に変換されてしまうため、指数表現の場合は小数点形式の数値に置き換わってしまいます

また、文字列から数値への変換には「Number」を使うのが一般的な方法ですが、数字以外を含む文字列を引数に指定すると「NaN」が返ってきてしまうため、その点には注意が必要です。

その他、文字列から数値への変換には「parseInt」を使う方法もあります。例えば、数値の「987」と文字列の「987」を同じように扱いたい場合は、「Number」よりも「parseInt」がおすすめです。

その理由は、「parseInt」が文字列型の値を解析して、「Number」の数値に変換してくれる機能を持っているためです。記述方法は、

parseInt(文字列)

といったように、引数へ数値に変換したい文字列を指定してあげましょう。

その他、以下のような面白いやり方も存在します。

let number = '100';

// 暗黙的型変換により数値へ変換される
value - 0;
=> 100

主に上記の3つのやり方が存在していますが、それぞれ少しずつ挙動が異なっています。下記にまとめておりますので、ご自身が求める仕様のものを利用するようにしてくださいね。

// 文字列の後方に数字以外が入っている場合
let number = '123px';
Number(value);
=> NaN
parseInt(value, 10);
=> 10
value - 0;
=> NaN

// 文字列の前方に数字以外が入っている場合
let number = 'A123';
Number(value);
=> NaN
parseInt(value, 10);
=> NaN
value - 0;
=> NaN

// 空文字の場合
let number = '';
Number(value);
=> 0
parseInt(value, 10);
=> NaN
value - 0;
=> 0

数値から文字列への変換

数字などの文字列でないものを文字列に型変換するには「String()」や「toString()」を使用すると実現可能です。

基本的な使い方

let number = 100

String(number);
number.toString();
=> "100"

なお、「toString」はカンマ区切りやパーセント表記などの書式指定ができないため、その場合にはNumber型の値をそのままString()の引数にしてあげましょう。

その他、以下のようなやり方もよく使用されます。

let number = 100

// 暗黙的型変換により文字列へ変換される
number + ''
=> "100"

文字列/数値からBoolean型への変換

文字列/数値からBoolean型への変換は、Javascriptでは真偽値(true/false)を判定する際に使います。

真偽値とは、コンピュータ言語で「オン(On)/オフ(Off)」の状態を表現したり判定したりすることです。簡単に説明すると、YesとNoを判定する値のことです。

  • 真(On):true
  • 偽(Off):false

文字列/数値からBoolean型へ変換するには、下記のように、真偽を確認したい値を引数に指定すれば大丈夫です。

const x = Boolean(確認したい引数)

このとき、「x」にはその真偽を入れるのですが、注意しなければいけないことがあります。それは、文字列/数値からBoolean型への変換には、下記のルールがあることです。

  • 文字列が空文字の時のみfalseに変換
  • 他の文字列はすべてtrueに変換
  • 基本的な数値は、0の場合はfalseに変換
  • 0以外はtrueに変換
  • Number.NaNなどの数値リテラルは、NaNの場合は0に変換
  • NaN以外はtrueに変換

これらのルールに注意して、文字列/数値からBoolean型へ変換しましょう。

Boolean型から文字列/数値への変換

Boolean型から文字列/数値への変換を利用する際は、下記のルールに注意しなければなりません。

  • 数値への変換はtrueが1に変換
  • 数値への変換はfalseが0に変換
  • 文字列への変換はそのままの文字列になる

boolean型の値から「true」と「false」という文字列を取得しなければならないケースは、ほとんどありません。しかし、いざ使う場合も想定されますので、これらのルールは理解しておきましょう。

暗黙的型変換には気を付けましょう


さて、ここからは、Javascriptの特徴の一つである「暗黙的型変換」についてご紹介していきます。


JavaScriptでの型変換には、下記の2種類が存在します。

  • 明示的変換
  • 暗黙的変換

暗黙的型変換を利用すれば、短い表記で文字列を数値に変換することが可能ですが、思わぬところでバグが発生する可能性があるため注意しなければなりません。

まずは、暗黙的変換とは何なのか詳しくみていきましょう。

暗黙的型変換とは?

暗黙的型変換とは、明示的な指定をしなくてもコンパイラが適切な型を判断して変換が自動的に行われる型変換のことを指します。コンパイラする際のプログラミング言語の処理系(言語処理系)の一種です。

つまり、高水準言語によるソースコードから、機械語あるいはもとのプログラムよりも低い水準のコードに変換(コンパイル)するプログラムのことを指します。

Javascriptでは上記のような変換を自動的に判断して実行してくれるのですが、その仕様をよく分かっていないと思わぬところでバグが発生してしまい、デバッグにも時間がかかってしまうことがあります。

文字だけではイメージが湧きにくいと思いますので、実際の例を見ながら確認していきましょう。

暗黙的型変換の例

プリミティブ型における暗黙的型変換

例えば、Javascriptでは、暗黙的に型変換してくれるため、以下の通り、数値と文字列を足し合うことも可能です。

10 + '10'
=> 1010

もちろん、実際の計算結果とは異なっていますが、ここでエラーは発生せず、そのまま処理が進んでしまいます。その結果、どこでエラーが発生しているかが分かりづらくなり、デバッグにも時間がかかってしまうのです。

これは数値とBooleanの場合にも発生します。

10 + true
=> 1010

こんなことがあり得るのか、と思ってしまいますが、Javascriptはとても賢いため、上述したようにtrue1に変換して、そのまま処理を進めてしまうのですね。

オブジェクト型における暗黙的型変換

もちろんオブジェクト型でも同様に暗黙的型変換は実行されます。

let string1 = new String("Javascript")
let string2 = new String("Javascript")

// 変数への格納値(Javascript)は同じであるものの、参照先のオブジェクトが異なるため false が返される
string1 == string2
=> false

// 「+ ''」を実行すると、 暗黙的型変換により、文字列同士の比較と判断されるため true が返される
string1 + '' == string2 + ''
=> true

こうして見ると面白い動きに感じられますが、「暗黙的型変換」の動きをきちんと理解しておかないと、「あれ、Javascriptのバグか?」とも受け取られそうですよね。「知っているのと知らないのとでは大違い」の良い例ではないでしょうか。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascritの型変換について詳細に解説してきましたが、いかがでしたか?

型変換自体は非常にシンプルで扱いやすいものですが、注意が必要なのは「暗黙的型変換」です。

今回この記事を呼んでいただいた方は問題ないとは思いますが、まだ暗黙的型変換の仕様を知らない方も多いかと思いますので、その方々にもぜひ教えてあげてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。