- Home ›
- JavaScript入門 ›
- 型変換とラッパークラス ›
- HERE
文字列への変換
各値が文字列へ変換される時にどのように変換されるのかをまとめます。
| 種類 | 値 | 文字列 |
|---|---|---|
| 数値 | 10 | "10" |
| 18.334 | "18.334" | |
| 0x1A | "26" | |
| 3.14e3 | "3140" | |
| 論理値 | true | "true" |
| false | "false" | |
| null | null | "null" |
| グローバルプロパティ | undefined | "undefined" |
| NaN | "NaN" | |
| Infinity | "Infinity" | |
| オブジェクト | obj | obj.toString() |
値が文字列に変換されるのは、例えば「+」演算子の左辺または右辺が文字列であった場合にもう片方の値は自動的に文字列に変換されます。
var str = "num = " + 値;
上記のような場合、値は自動的に文字列に変換されます。
数値の場合は記述された数値がそのまま文字列となります。ただし16進数形式の場合は10進数にしてから文字列となり、指数表現の場合は小数点形式にしてから文字列となります。
論理値の場合はtrueは"true"に、falseは"false"に変換されます。
特殊な値であるnullは"null"に変換されます。
グローバルプロパティとして定義されているNaNは"NaN"、undefinedは"undefined"、Infinityは"Infinity"に変換されます。
オブジェクトが文字列に変換される時、オブジェクト毎に用意されているtoStringメソッドが呼び出された結果となります。いくつかの例をあげると次のようになります。
{x:90, y:110} --> [object Object]
["東京", "大阪"] --> 東京,大阪
function(x){return x + 1;} --> function (x) { return x + 1; }
Objectクラスのオブジェクトの場合には[object クラス名]に変換されます。他のクラスの場合ではObjectクラスのtoStringメソッドをオーバーライドしていますのでクラス毎に結果は異なりますが、もしもtoStringメソッドをオーバーライドしていなかった場合は同じように[object クラス名]となります。
配列を表すArrayクラスのオブジェクトの場合は要素の値をそれぞれ文字列に変換し、その後でカンマ(,)をセパレータとして連結した文字列を返します。
関数を表すFunctionクラスのオブジェクトの場合は多くの環境では関数の定義そのものを文字列として返します。ただしどのように返すのかは環境次第なので異なった文字列が返される場合もあります。
では簡単なサンプルで試してみます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>JavaScript テスト</title> </head> <body> <script type="text/javascript" src="./js/script1_1.js"> </script> </body> </html>
document.write("<p>文字列への変換</p>");
document.write("<p>");
document.write("10 --> " + 10 + "<br />");
document.write("39.72 --> " + 39.72 + "<br />");
document.write("3.14e3 --> " + 3.14e3 + "<br />");
document.write("0x1A --> " + 0x1A + "<br />");
document.write("true --> " + true + "<br />");
document.write("false --> " + false + "<br />");
document.write("null --> " + null + "<br />");
document.write("undefined --> " + undefined + "<br />");
document.write("NaN --> " + NaN + "<br />");
document.write("Infinity --> " + Infinity + "<br />");
document.write("{x:90, y:110} --> " + {x:90, y:110} + "<br />");
document.write("['東京', '大阪'] --> " + ["東京", "大阪"] + "<br />");
document.write("function(x){return x + 1;} --> " + function(x){return x + 1;} + "<br />");
document.write("new Boolean(true) --> " + (new Boolean(true)) + "<br />");
document.write("new Boolean(false) --> " + (new Boolean(false)) + "<br />");
document.write("new Number(32) --> " + (new Number(32)) + "<br />");
document.write("new String('772') --> " + (new String('772')) + "<br />");
document.write("new String('bom') --> " + (new String('bom')) + "<br />");
document.write("</p>");
上記を実際にブラウザ見てみると次のように表示されます。
( Written by Tatsuo Ikura )
AjaxTower