@ JavaScript

datatype:データ型

JavaScriptのデータ型

JavaScriptのデータ型は大きく分けて「プリミティブデータ型」と「オブジェクト」の2種類に分けることができます。

プリミティブデータ型

プリミティブデータ型は次のとおりです。

Number 数値
String 文字列
Boolean 論理値
null 値が存在しない
Undefined 未定義
Symbol シンボル
Number(数値)
数値は、最も基本的なデータ型です。CやJava と異なる点は、JavaScript が整数と浮動少数点数を区別しないことです。JavaScript は、すべての数値を浮動小数点数で表します。
String(文字列)
文字列は、英字、数字、記号などの文字の並びのことです。
Boolean(論理値)
数値と文字列が取りうる値は無限にあります。それに対して、論理データ型が取りうる値は2つしかありません。論理値は何かが真か(true)、真でないか(false)を表します。
null(値が存在しない)
null は、「値がない」ことを表す特殊な値です。JavaScript は大文字・小文字を区別するため、null は Null や NULL などとは異なります。
Undefined(未定義)
Undefined という特殊な値があります。宣言されている値が、設定されていない変数、存在しないオブジェクトプロパティを使おうとすると、未定義が返されます。null 値と同じではないので注意が必要です。
Symbol(シンボル)
Symbolは、そのインスタンスがユニークで不変なプリミティブデータ型です。ほかのプログラミング言語では、atomと呼ばれることもあります。

オブジェクト型

オブジェクトはプロパティの集合体です。
プロパティは、キー(名前)とバリュー(値)で構成される他のオブジェクトやデータ、function などを保持するための入れ物です。配列や関数などもオブジェクトに含まれます。

オブジェクト プロパティ1 (変数1)
プロパティ2 (変数2)
プロパティ3 (変数3)
メソッド1 (function1 が代入されたプロパティ)
メソッド2 (function2 が代入されたプロパティ)

データ型を調べる

変数のデータ型を調べるにはtypeof()を使います。

typeof.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
var str = 'abc'
alert(typeof(str));
</script>
</head>

<body>
</body>

</html>

demo

typeof 演算子は、型情報を文字列で返します。

typeof 演算子が返す文字列は、”number” “string” “boolean” “object” “function” “undefined” “symbol” の 7 つです。

typeof の構文のかっこは省略できます。

変数のデータ型が関数であるかどうかを調べるソースコードの例を次に示します。

datatypes.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
window.onload = function() {

  var unknownVariable = function(){
    // TODO
  };

  if (typeof unknownVariable == "function") {
    alert("true");
  } else {
    alert("false");
 }

};
</script>
</head>

<body>
</body>

</html>

demo

自動データ型変換

[+]や[+=]で文字列と別のデータ型を連結すると、自動データ変換が適用されて、
他のデータ型の値は文字列に変換されて連結されます。

convert_01.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
window.onload = function() {

  var boolValue = true;
  var stringValue = "This value is " + boolValue;

  alert(typeof stringValue);

};
</script>
</head>

<body>
</body>

</html>

文字列から数値への自動データ型変換

文字列、論理値、オブジェトなどを「-」や「*」演算子などで数値と演算を行った場合、対象の値は数値に自動的に変換されます。数字ではない文字が含まれている文字列はNaNに変換されます。

「+」演算子の場合は結果が異なるので、注意が必要です。JavaScript では「+」演算子はオーバーロード(多重定義)されているので、文字列で使った場合、結果は右辺にある文字列が左辺文字列の後に連結されます。

convert_02.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
window.onload = function() {

  var str = "123";
  var unknownVariable = str - 0;

  if (typeof unknownVariable == "number") {
    alert("true");
  } else {
    alert("false");
  }

};
</script>
</head>

<body>
</body>

</html>

キャスト(型変換)

JavaScriptで型変換をするいくつかの方法。

文字列から数値へ

cast_01.hmtl

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
window.onload = function() {
  var string = "3.14159";

  var result = Number(string); // Numberコンストラクタ
  //var result = parseInt(string); // parseInt()メソッド
  //var result = parseFloat(string); // parseFloat()メソッド
  //var result = string - 0; // 自動変換
  //var result = eval(string); // eval()メソッド

  alert(typeof result);
}
</script>
</head>

<body>
</body>

</html>

数値から文字列へ

cast_02.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
window.onload = function() {
  var number = 3.14159;
  var num_obj = new Number(3.14159);

  var result = String(number);// Stringコンストラクタ
  //var result = number.toString(); // toString()メソッド
  //var result = number + ""; // 自動変換
  //var result = num_obj.toFixed(0); // toFixed()メソッド

  alert(typeof result);
}
</script>
</head>

<body>
</body>

</html>

次のような方法もあります。

cast_03.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
window.onload = function() {
  var fooVar = "3.14159";

  str = "" + fooVar;// to string
  int = ~~fooVar;// to integer
  float = 1 * fooVar;// to float
  bool = !!fooVar;// to boolean
  array = [fooVar];// to array

  alert(typeof str);
}
</script>
</head>
  
<body>
</body>

</html>