JavaScript 型の変換 1-HTML5 CSS3 JavaScript

JavaScript 型の変換 1

JavaScript

このエントリではキャスト（型の変換）について書き連ねてみるよ

数値から文字列への型変換

数字と文字列を結合するパターン

// ☺ 3行目の value は自動的に文字列に変換されます
var value = 5150;
var result = "VanHalen" + value;

// ☺ 空文字を足すのはもはやおきまりの方法
var value_as_str = value + "";

String関数の使用

// ☺ String()関数での変換
var result = String(value);

toString()メソッドの使用

// ☺ toString()メソッドをかます
var result = value.toString();

toFixed()メソッドの使用

var value=123.456;
value.toFixed();　// 結果："123"
value.toFixed(1);　//結果："123.5"
value.toFixed(2);　//結果："123.46"

四捨五入が行われた後に変換されるよ

toExponential()メソッドの使用

var value=123.456;
value.toExponential(0);　// 結果："1e+2"
value.toExponential(1);　// 結果："1.2e+2"
value.toExponential(2);　// 結果："1.23e+2"
value.toExponential(3);　// 結果："1.235e+2"
value.toExponential(4);　// 結果："1.2346e+2"

有効桁数の最後に四捨五入が行われた後に指数形式に変換されるよ。
もちろん、元々が整数値の部分には四捨五入は行われないんだ

toPrecision()メソッドの使用

var value=123.456;
value. toPrecision(0);　// 結果：範囲指定がされていないのでエラー
value. toPrecision(1);　// 結果："1e+2"
value. toPrecision(2);　// 結果："1.2e+2"
value. toPrecision(3);　// 結果："123"
value. toPrecision(4);　// 結果："123.5"
value. toPrecision(5);　// 結果："123.46"

有効桁数（この場合 value は６桁）を指定して文字列に変換するよ。
指定した有効桁数が整数部よりも桁数が少ない場合（この場合は3以下）には、指数形式に変換されるよ

文字列から数値への変換

結果として数値を期待されるコンテキスト上で、文字列を使用すると自動的に数値に変換されるよ

var result = "5" * "9";　// 結果：45

重要なのは、変換対象に対し数値であることが絶対条件だったりするよ。以下のサンプルはNaN（Not a Number）が返ってくるんだ

// ☺ 文字列 "12F" から 5 を引く。
var text_data = "12F";
var result = text_data - 5;　// 結果：NaN

// ☺ オブジェクト myObj から 5 を引く。
var myObj = new Object();
var result = myObj - 5;　// 結果：NaN

// ☺ 配列 myArray から 5 を引く。
var myArray = new Array(10);
var result = myArray - 5;　// 結果：NaN

当然っちゃ当然だけど、面白い事に論理値は違う反応を示してくれるよ

// ☺ 論理値 true から 5 を引く。
var myBool = true;
var result = myBool - 5;　// 結果：-4

// ☺ 論理値 false から 5 を引く。
var myBool2 = false;
var result = myBool2 - 5;　// 結果：-5

これはご想像のとおり、数値コンテキスト上では true = 1 , false = 0 が定義（変換？）されているよ。逆に論理値は文字コンテキスト上では文字列として扱われるよ。

// ☺ 論理値 true と文字列 "知っ" を足す
var myBool = true;
var result = "知っ" + myBool;　// 結果："知っtrue"

論理値について

論理値 false は、 0 または NaN、undefined と等価だよ。

また、論理値falseは必要に応じて０やNaNに変換されるよ。論理値 true は数値コンテキスト上では1に変換されるけど、0とNaN、undefined以外を論理値に変換すると、true に変換されるよ。これについては次回の記事で書くよ。

文字列から数値への変換の続き

ハナシを元に戻すよ。文字列を数値に変換する方法は他にもNumber()コンストラクタを使う方法があるよ。

var text_value = "50":
var result = Number(text_value);

この際、text_value に求められるのは、10進数の数値であること。また、parseInt()関数やparseFloat()関数は数字以外のものを無視(※サンプル参照)して変換するけど、16進数や8進数などの文字列の先頭が0xや07,03など特殊な形式の場合適時それを解釈し変換するよ

// tomato以降を文字列として認識。処理は無視される
var text_value = "123tomato456";　// 結果：123

// 0xFを16進数として解釈。tomato以降は無視される
var text_value2 = "0xFtomato123";　// 結果：15

ちなみにparseInt()関数やparseFloat()関数は、変換が不可能だった時にNaNを返すよ。

JavaScript 型の変換 2へ続く

数値から文字列への型変換

文字列から数値への変換

論理値について

文字列から数値への変換の続き

お広告