値の型を変換する

値の型を変換する

JavaScriptの値には必ず「型」があり、必要に応じて別の型に変換することができます。
値の基本型は以下の5種類です。

以降ではそれぞれの型の値を使って、特定の型に変換する方法について解説していきます。
ただし、nullとundefinedへの変換は基本的に行うことはないため省略します。

文字列（string）に変換する

値を文字列に変換するにはStringのコンストラクタ関数を使う方法と、toStringメソッドを使う方法の2種類があります。
2つの方法は変換後の値は同じになりますが、toStringメソッドは型がstring、number、booleanの場合のみ使用できます。

コード例

let data1 = 1501; // 数値
let data2 = -200; // 負の数値
let data3 = 0.006; // 浮動小数点数
let data4 = '$0.5'; // 文字列を含む数値
let data5 = '0.15BTC'; // 文字列を含む数値
let data6 = 'test'; // 文字列
let data7 = ''; // 空の文字列
let data8 = true; // 真偽値
let data9 = false; // 真偽値
let data10 = null; // null（値なし）
let data11 = undefined; // undefined（未定義）


// Stringコンストラクタ関数で変換
console.log(String(data1)); // '1501'
console.log(String(data2)); // '-200'
console.log(String(data3)); // '0.006'
console.log(String(data4)); // '$0.5'
console.log(String(data5)); // '0.15BTC'
console.log(String(data6)); // 'test'
console.log(String(data7)); // ''
console.log(String(data8)); // 'true'
console.log(String(data9)); // 'false'
console.log(String(data10)); // 'null'
console.log(String(data11)); // 'undefined'


// toStringメソッドで変換
console.log(data1.toString()); // '1501'
console.log(data2.toString()); // '-200'
console.log(data3.toString()); // '0.006'
console.log(data4.toString()); // '$0.5'
console.log(data5.toString()); // '0.15BTC'
console.log(data6.toString()); // 'test'
console.log(data7.toString()); // ''
console.log(data8.toString()); // 'true'
console.log(data9.toString()); // 'false'
console.log(data10.toString()); // エラー
console.log(data11.toString()); // エラー

Stringのコンストラクタ関数を使う方法は「String(変換したい値)」の形で使用します。
もとの値の型に依存せず使用できるため、基本的にはこちらの方法で変換することをオススメします。

もう1つのtoStringメソッドは「変換したい値.toStringメソッド」の形で使用します。
先述の通り、toStringメソッドは変換したい値の型がstring、number、booleanのいずれかである必要があります。

n進数の変換

数値（number）にtoStringメソッドを使うときにパラメータに数値を指定すると、10進数からn進数への変換をしたうえで文字列変換を行うことができます。

コード例

let data = 1501;

// 2進数表記の文字列に変換
console.log(data.toString(2)); // '10111011101'

// 8進数表記の文字列に変換
console.log(data.toString(8)); // '2735'

// 16進数表記の文字列に変換
console.log(data.toString(16)); // '5dd'

// 10進数表記の文字列に変換
console.log(data.toString()); // '1501'
console.log(data.toString(10)); // '1501'

パラメータを指定しないときと「10」を指定した場合は10進数のまま文字列に変換します。
また、2進数や16進数の値に対してtoString(10)を実行しても10進数に変換することはできません。

数値（number）に変換する

値を数値に変換するにはNumberのコンストラクタ関数を使う方法、整数に変換するparseIntメソッドを使う方法、浮動小数点数に変換するparseFloatメソッドを使う方法の3種類あります。

コード例

let data1 = '1501'; // 文字列の数値
let data2 = '-200'; // 文字列の負の数値
let data3 = '0.006'; // 文字列の浮動少数点数
let data4 = '$0.5'; // 文字と数値が混合した文字列
let data5 = '0.15BTC'; // 文字と数値が混合した文字列
let data6 = 'test'; // 文字列
let data7 = ''; // 空の文字列
let data8 = true; // 真偽値
let data9 = false; // 真偽値
let data10 = null; // null（値なし）
let data11 = undefined; // undefined（未定義）


// Numberコンストラクタ関数で変換
console.log(Number(data1)); // 1501
console.log(Number(data2)); // -200
console.log(Number(data3)); // 0.006
console.log(Number(data4)); // NaN
console.log(Number(data5)); // NaN
console.log(Number(data6)); // NaN
console.log(Number(data7)); // 0
console.log(Number(data8)); // 1
console.log(Number(data9)); // 0
console.log(Number(data10)); // 0
console.log(Number(data11)); // NaN


// parseIntメソッドで変換
console.log(parseInt(data1)); // 1501
console.log(parseInt(data2)); // -200
console.log(parseInt(data3)); // 0
console.log(parseInt(data4)); // NaN
console.log(parseInt(data5)); // 0
console.log(parseInt(data6)); // NaN
console.log(parseInt(data7)); // NaN
console.log(parseInt(data8)); // NaN
console.log(parseInt(data9)); // NaN
console.log(parseInt(data10)); // NaN
console.log(parseInt(data11)); // NaN


// parseFloatメソッドで変換
console.log(parseFloat(data1)); // 1501
console.log(parseFloat(data2)); // -200
console.log(parseFloat(data3)); // 0.006
console.log(parseFloat(data4)); // NaN
console.log(parseFloat(data5)); // 0.15
console.log(parseFloat(data6)); // NaN
console.log(parseFloat(data7)); // NaN
console.log(parseFloat(data8)); // NaN
console.log(parseFloat(data9)); // NaN
console.log(parseFloat(data10)); // NaN
console.log(parseFloat(data11)); // NaN

いずれの方法も文字列は「NaN」になってしまいますが、空の文字列である「data7 = '';」はNumberコンストラクタ関数を使ったときのみ「0」に変換することができます。
Numberコンストラクタ関数は真偽値やnullも数値に変換することができます。

parseIntメソッドとparseFloatメソッドは基本的に文字列の数値のみ変換することができ、それ以外はNaNになります。
ただし、「'0.15BTC'」のように「数字 + 文字列」の場合のみ、数値に変換することができます。

小数点以下の数値を残したいときはparseFloatメソッド、小数点以下を四捨五入して丸めたいときはparseIntメソッドを使います。

真偽値（boolean）に変換する

値を真偽値に変換するにはBooleanのコンストラクタ関数を使います。

コード例

let data1 = 1501; // 数値
let data2 = -200; // 負の数値
let data3 = 0.006; // 浮動小数点数
let data4 = '$0.5'; // 文字列を含む数値
let data5 = '0.15BTC'; // 文字列を含む浮動小数点数
let data6 = 'test'; // 文字列
let data7 = ''; // 空の文字列
let data8 = true; // 真偽値
let data9 = false; // 真偽値
let data10 = null; // null（値なし）
let data11 = undefined; // undefined（未定義）


// 論理値（boolean）に変換
console.log(Boolean(data1)); // true
console.log(Boolean(data2)); // true
console.log(Boolean(data3)); // true
console.log(Boolean(data4)); // true
console.log(Boolean(data5)); // true
console.log(Boolean(data6)); // true
console.log(Boolean(data7)); // false
console.log(Boolean(data8)); // true
console.log(Boolean(data9)); // false
console.log(Boolean(data10)); // false
console.log(Boolean(data11)); // false

配列を文字列に変換する

Arrayオブジェクトの配列はStringのコンストラクタ関数やJSON.stringifyメソッドを使って文字列に変換することができます。

以下の例では変数array_dataに入っている多次元配列（2次元配列）を文字列に変換します。
Stringのコンストラクタ関数を使った場合は配列のブラケットを含まない文字列に変換し、JSON.stringifyメソッドを使った場合はブラケットを残した状態で文字列に変換します。

コード例

let array_data = [
  [1,'lion'],
  [2,'cat'],
  [3,'rhinos']
];


// Stringコンストラクタ関数で文字列に変換
console.log(String(array_data));
// 1,lion,2,cat,3,rhinos


// JSON.stringfyメソッドで文字列に変換
console.log(JSON.stringify(array_data));
// [[1,"lion"],[2,"cat"],[3,"rhinos"]]

オブジェクトを文字列に変換する

プロパティを持つオブジェクトはJSON.stringifyメソッドを使って文字列に変換することができます。

以下の例では変数johnに入っているオブジェクトを文字列に変換します。
Stringコンストラクタ関数とJSON.stringifyメソッドの2通りで変換しますが、Stringコンストラクタ関数はうまく変換できません。

コード例

let john = {
  id:15000,
  name:'John',
  job:'Fisherman',
  contact: {
    email:'john@gray-code.com',
    tel:'080-2222-1111'
  }
};


//  Stringコンストラクタ関数で文字列に変換（変換できない）
console.log(String(john));
// [object Object]


// JSON.stringfyメソッドで文字列に変換
console.log(JSON.stringify(john));
// {"id":15000,"name":"John","job":"Fisherman","contact":{"email":"john@gray-code.com","tel":"080-2222-1111"}}

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。