型変換(キャスト)の基本

このレッスンでは、JavaScriptにおける型変換(キャスト)の基本を学び、文字列と数値を正しく変換して扱えるようになることを目標にします。「JavaScript 型変換 やり方」「JavaScript 文字列 数値 変換」で調べている方向けの内容です。

文字列を数値に、数値を文字列にといった型変換(キャスト)はプログラミングの基本操作です。Number()・String()・parseInt()などを使います。フォームの入力値は基本的に文字列として渡ってくるため、計算に使う前に必ず数値へ変換する必要があります。型を意識せずに演算すると、思わぬバグの原因になるので注意しましょう。

サンプルコードでは、文字列"123"をNumber()で数値に変換して計算に使い、数値45をString()で文字列に変換して「円」という文字とつなげています。parseInt()は文字列の先頭から数値として読める部分だけを取り出す関数で、"123px"のような単位付きの文字列からも数値だけを抜き出せます。

初心者がよくつまずくのが、文字列のまま数値のつもりで+演算子を使ってしまい、計算ではなく文字列の連結になってしまうケースです。"5" + 3は8ではなく"53"という文字列になります。逆に"5" - 3は自動的に数値変換されて2になるなど、演算子によって挙動が異なる点も混乱を招きやすいポイントです。

実際の開発現場では、フォームから受け取った入力値やURLのパラメータは常に文字列として扱われるため、金額計算や日付計算を行う前に必ず適切な型変換を挟む必要があります。型を意識したコードは、バグの少ない安定したアプリケーションを作るための基本です。