JavaScript

レシピ

データについて

型を変換する

値の型を指定した型に変換する方法について解説します。

この記事のポイント

  • 数値にtoStringメソッドを使うとn進数の変換ができる
  • オブジェクトを文字列(String)に変換するときはJSON.stringifyメソッドを使う

目次

値の型を変換する

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

値の例
文字列(string‘abc’‘あいうえお’‘猫’
数値(number10-500.5125NaN(計算不可の場合)
真偽値(booleantruefalse
nullnull(値が空)
undefinedundefined(値が存在しない、変数が定義されていない)

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

文字列(string)に変換する

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

コード例

var data1 = 1501; // 数値
var data2 = -200; // 負の数値
var data3 = 0.006; // 浮動小数点数
var data4 = '$0.5'; // 文字列を含む数値
var data5 = '0.15BTC'; // 文字列を含む数値
var data6 = 'test'; // 文字列
var data7 = ''; // 空の文字列
var data8 = true; // 真偽値
var data9 = false; // 真偽値
var data10 = null; // null(値なし)
var 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メソッドは変換したい値の型がstringnumberbooleanのいずれかである必要があります。

n進数の変換

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

コード例

var 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種類あります。

コード例

var data1 = '1501'; // 文字列の数値
var data2 = '-200'; // 文字列の負の数値
var data3 = '0.006'; // 文字列の浮動少数点数
var data4 = '$0.5'; // 文字と数値が混合した文字列
var data5 = '0.15BTC'; // 文字と数値が混合した文字列
var data6 = 'test'; // 文字列
var data7 = ''; // 空の文字列
var data8 = true; // 真偽値
var data9 = false; // 真偽値
var data10 = null; // null(値なし)
var 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のコンストラクタ関数を使います。

コード例

var data1 = 1501; // 数値
var data2 = -200; // 負の数値
var data3 = 0.006; // 浮動小数点数
var data4 = '$0.5'; // 文字列を含む数値
var data5 = '0.15BTC'; // 文字列を含む浮動小数点数
var data6 = 'test'; // 文字列
var data7 = ''; // 空の文字列
var data8 = true; // 真偽値
var data9 = false; // 真偽値
var data10 = null; // null(値なし)
var 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メソッドを使った場合はブラケットを残した状態で文字列に変換します。

コード例

var 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コンストラクタ関数はうまく変換できません。

コード例

var 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"}}

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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