異なる型の連結と変換

異なる型の連結

文字列と数値を「+」で結合すると、数値は文字列に変換されます。

小数点以下の桁数を揃えるには？
  • 数値をある桁数まで表示させるには toFixed を使います。割り算の結果などを有効桁数まで求めたい場合によく使われます。
  • 例えば小数点以下、2桁までの近似値にしたい場合は以下のようにします。
var x = 10 / 3;
console.log(x.toFixed(2)); // 3.33が表示されます


より詳しくは以下のサイトを御覧ください。

「+」は文字列連結？それとも足し算？
  • JavaScriptの "+" は文字列同士に適用すると文字列の連結になり、数値同士に適用すると足し算になります。
  • そして、一方が文字列で一方が数値の場合には「文字列の連結」になります。
var x = "12";  // 文字列
var y = 6;  // 数値

// z は "126" になる
var z = x + y;
  • 上の例では z は 18 にはなりません。しかし以下のように x に 1 を掛けてから "+" を使うと x が数値になるため、結果は 18 になります。
// z は 18 になる
var z = x * 1 + y;
  • 同様に 0 を引いても結果は同じになります。
// z は 18 になる
var z = x - 0 + y;


a = 'フィンガー';
b = 5;
c = a + b;
a：文字列を代入します。
b：数値を代入します。


数値と論理値を「+」で連結すると、論理値は数値に変換されます。
数値に変換されたとき、「true」は「1」、「false」は「0」として扱われます。



a = 5;
b = true;
c = a + b;
a：数値を代入します。
b：論理値を代入します。true は 1 として扱われます。


異なる型の変数を連結したときには、次のように扱われます。

型名文字列と連結したときの値数値と連結したときの値
文字列型−文字列
数値型文字列−
論理型'true' または 'false'1または0
null型'null'0
未定義型'undefined'NaN

型の変換

JavaScriptで用意されている関数を使うと、文字列を数値に変換できます。

parseInt()関数

パースイント関数は、文字列を整数に変換します。


a = '411';
num = parseInt(a);

文字列に小数点以下があるときは、小数点以下は切り捨てられます。

parseFloat()関数

パースフロート関数は、文字列を小数に変換します。


a = '411.82';
num = parseFloat(a);

toString()メソッド

トゥストリングメソッドは、いろいろな型を文字列に変換します。


a = '411';
b = true;
str = a.toString();
boo = b.toString();
str：数値411を文字列に変換します。
boo：論理値trueを文字列に変換します。


変数aと変数bは、一時的にオブジェクトに変換されます。


入力ダイアログボックスを表示

prompt()

  • promptメソッドは、指定したウィンドウに文字ダイアログを表示する
  • window.prompt('ダイアログに表示される文字列','入力欄の初期値')と指定する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>平成を西暦に変換する</title>
</head>
<body>
<script>
    var heisei;
    var fullYear;
    var message;
	
    heisei = prompt('平成の年号を入力してください。', 23);
    fullYear = heisei + 1988;
    message = '平成' + heisei + '年は' + '西暦' + fullYear + '年です。';
    window.alert(message);
</script>
</body>
</html>


この結果は「文字列 + 数値」で「文字列 + 文字列」になり

となります。



parseInt関数

  • 文字列を整数に変換するにはparseInt関数
parseInt('10')         -->  10
parseInt('2008year')   -->  2008
parseInt('-77point')   -->  -77

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>平成を西暦に変換する</title>
</head>
<body>
<script>
    var heisei;
    var fullYear;
    var message;
	
    heisei = prompt('平成の年号を入力してください。', 23);
    fullYear = parseInt(heisei) + 1988;
    message = '平成' + heisei + '年は' + '西暦' + fullYear + '年です。';
    window.alert(message);
</script>
</body>
</html>