JS型変換（必須型変換+暗黙的型変換）

JavaScript には 5 つの基本データ型 (文字列、数値、ブール値、関数、シンボルを含む)、3 つのオブジェクト型 (オブジェクト、日付、配列を含む)、および 2 つの特別な型 (Null、未定義を含む) があります。異なる型間の操作では、最初にデータ型を変換する必要があります。型変換は、ある型のデータを別の型のデータに変換するプロセスです。私たちは日常の開発でよく使用します。

 

JavaScript の型変換には、暗黙的な型変換と必須の型変換 (明示的な型変換とも呼ばれます) の 2 つの方法があります。

1. JSの暗黙的な型変換

暗黙的な変換は、通常は何らかの数学的演算で行われる自動変換です。 JavaScript は型指定が弱い言語であるため、式では演算子の両側の型が異なる場合があり (文字列と数値の追加など)、JavaScript インタプリタは次のように演算前に型を変換します。

 変数 str には "https://it-kiso.com/" という文字列が、変数 num には数値 123 が入っています。変数 res には、str と num を結合した文字列が代入されます。そして、typeof res で変数 res の型が string であることを確認し、document.write() で変数 res の値を表示します。つまり、以下のようになります。

var str = "https://it-kiso.com/";
var num = 123;
var res = str + num;
document.write(typeof res);  // 出力：string
document.write(res);         // 出力：https://it-kiso.com/123 

実行結果からわかるように、数値に文字列を加算すると、文字列型の値が得られます。 C 言語または Java 言語の場合、上記の操作は演算子の両側のデータ型の不一致によりエラーが発生しますが、JavaScript ではエラーが発生しません。これは、JavaScript インタプリタが上記の num 変数を隠す前に行うためです。数式が文字列型に変換されてから、演算が実行されます。

JavaScript では、式に次の演算子が含まれる場合、暗黙的な型変換が発生します。

• 算術演算子: 加算 (+)、減算 (-)、乗算 (*)、除算 (/)、剰余 (%)。
• 論理演算子: 論理積 (&&)、論理和 (||)、論理否定 (!)。
• 文字列演算子: +、+=。

サンプルコードは次のとおりです。

 document.write("3" - 2);           // 出力：1
document.write("3" + 2);           // 出力："32"
document.write(3 + "2");           // 出力："32"
document.write("3" * "2");         // 出力：6
document.write("10" / "2");        // 出力：5
document.write(1 + true);          // 出力：2
document.write(1 + false);         // 出力：1
document.write(1 + undefined);     // 出力：NaN
document.write(3 + null);          // 出力：3
document.write("3" + null);        // 出力："3null"
document.write(true + null);       // 出力：1
document.write(true + undefined);  // 出力：NaN 

結果を実行すると、次のように結論付けることができます。

• 文字列に数値を追加すると、数値は文字列に変換されます。
• 数値から文字列を引いた場合、文字列は数値に変換されます。文字列が数値に変換できない場合 (「abc」、「JavaScript」など)、NaN に変換されます。
• 文字列から数値を引いた場合、文字列は数値に変換されます。文字列が数値に変換できない場合は、NaN に変換されます。
• 乗算または除算を行う場合、文字列は最初に数値に変換されます。

2.JSの型変換

暗黙的な型変換とは対照的に、必須の型変換は手動で行う必要があります。JavaScript では、必須の型変換は主に Number()、Boolean()、parseInt()、parseFloat() などのグローバル関数を呼び出すことによって実現されます。

1) Number() 関数を使用する

Number() 関数の構文は次のとおりです。

number(value);

サンプルコードは次のとおりです。

 document.write(Number("10.5"));  // 出力：10.5
document.write(Number(true));    // 出力：1
document.write(Number(false));   // 出力：0
document.write(Number(null));    // 出力：0 

Number() 関数を使用する場合は、次の点に注意してください。

• パラメータに数値のみが含まれている場合、先頭の 0 と先頭のスペースを無視して 10 進数に変換されます。数値の前に負の (-) 記号がある場合は、変換結果に-が残ります。数値の前のプラス (+) 記号、変換 その後、 +記号は削除されます。
• パラメータに有効な浮動小数点数が含まれている場合は、先頭の 0 と先頭のスペースを無視して、対応する浮動小数点数に変換されます。また、数値の前の符号については、負の符号は保持され、正の符号は維持されます。無視されます。
• パラメータに有効な 16 進数が含まれている場合は、対応するサイズの 10 進数に変換されます。
• 引数が空の文字列の場合は 0 に変換されます。
• 引数がブール値の場合、true は 1 に、false は 0 に変換されます。
• パラメータが null の場合は 0 に変換されます。
• 引数が未定義の場合、NaN に変換されます。
• 引数が Date オブジェクトの場合、1970 年 1 月 1 日から変換が実行されるまでのミリ秒数に変換されます。
• パラメータが関数、3 つ以上の要素を含む配列オブジェクト、および Date オブジェクト以外のオブジェクトの場合は、NaN に変換されます。
• 引数の前に特殊記号やスペース、 + 、 -を除く数字以外の文字が含まれている場合、または引数の途中にスペース、 + 、 -を含む特殊記号や数字以外の文字が含まれている場合は、 NaN に変換されます。

2) parseInt()関数を使用する

parseInt() 関数の構文形式は次のとおりです。

parseInt(文字列, 基数);

このうち、文字列は変換対象の値です。パラメータが文字列でない場合は、最初に文字列に変換され、文字列の先頭の空白は無視されます。基数はオプションのパラメータであり、文字列の基数と値の範囲 2 ～ 36。たとえば、radix パラメータを 16 に設定すると、文字列が 16 進数に変換されます。

parseInt() 関数を使用する場合は、次の点に注意してください。

• 文字列を解析する場合、文字列の前後のスペースは無視されます。文字列の最初の文字がマイナス記号 (-) の場合、マイナス記号は変換結果に残ります。文字列の最初の文字がプラスの場合、変換結果にはマイナス記号が残ります。符号 (+) の場合、変換後に正符号は無視されます。
• 文字列の前に、スペース、正符号 (+)、負符号 (-)、または a~f (または A~F) 以外の非数字文字以外の特殊記号がある場合、その文字列は返される結果は NaN です。
• 文字列にスペース、小数点 (.)、数字以外の文字などの特殊記号が含まれている場合、これらの文字が見つかると解析は停止し、解析結果が返されます。
• string が空の文字列の場合、結果は NaN になります。

サンプルコードは次のとおりです。

 document.write(parseInt("1101",2));   // 出力：13
document.write(parseInt("a37f",16));  // 出力：41855
document.write(parseInt("123"));      // 出力：123
document.write(parseInt("  123"));    // 出力：123 

3) parseFloat() 関数を使用する

parseFloat() 関数の構文形式は次のとおりです。

parseFloat(文字列);

ここで、 string は浮動小数点数に変換される値、または変換が失敗した場合は NaN です。

parseFloat() 関数を使用する場合は、次の点に注意してください。

• 解析中に科学表記法のプラス記号 (+)、マイナス記号 (-)、数字 (0 ～ 9)、小数点 (.)、または指数 (e または E) 以外の文字が見つかった場合、これは無視されます。文字とその後のすべての文字を検索し、解析された浮動小数点数を返します。
• 解析中に複数の小数点が見つかった場合、解析が小数点第 2 位に達した時点で停止し、小数点第 2 位より前の解析結果を返します。
• パラメータの先頭または末尾の空白文字は、解析中に無視されます。
• 引数の最初の文字を数値として解析できない場合は、NaN が返されます。

サンプルコードは次のとおりです。

 document.write(parseFloat("312.456"));  // 出力：312.456
document.write(parseFloat("-3.12"));    // 出力：-3.12
document.write(parseFloat("+3.12"));    // 出力：3.12
document.write(parseFloat(".12"));      // 出力：0.12