（最終更新月：2023年12月）
✔このような方へ向けて書かれた記事となります
「Javascriptで文字列を数値にどう変換するのか知りたい」
「Javascriptで文字列と数値の変換の書き方を覚えたい」
「Javascriptを使った文字列・数値変換の具体的な実例が見てみたい」
✔当記事を通じてお伝えすること
- Javascriptでの文字列から数値への変換の基本
- 具体的な書き方とその応用
- 実例を用いた文字列・数値変換
当記事では、Javascriptを用いて文字列を数値に変換する基本的な手法から応用まで、具体的な実例を交えて解説いたします。
ぜひ最後までお読みください。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
JavaScriptとデータ型
こちらでは、JavaScriptとデータ型についてお伝えしていきます。
JavaScriptのデータ型について理解することで、効率的なプログラム作成に役立つでしょう。
- データ型の概要とその意義
- 文字列と数値の相違点
- 現実の変換シナリオ
データ型の概要とその意義
JavaScriptには様々なデータ型が存在します。
stringnumberboolean
データ型を正確に理解することは、変数の扱いや関数の実行、さらにはエラーを避けるために重要です。
実際のコード上では、let x = "Hello";のようにx変数に文字列データ型を代入して使用します。
文字列と数値の相違点
文字列はテキストデータを表現するためのデータ型で、"Hello"や'123'のようにダブルクォートまたはシングルクォートで囲まれます。
一方、数値は数のデータを表すもので、123や3.14のようにクォート無しで表されます。
let str = "123";
let num = 123;前者は文字列、後者は数値として扱われます。
現実の変換シナリオ
ウェブページのフォームから取得した情報は、多くの場合文字列として返されます。
しかし計算をおこなう場合など、これを数値として扱いたい場面もあるでしょう。
let userInput = "5";
let total = parseInt(userInput) + 10;このように、parseIntを使用して文字列の”5″を数値の5に変換し、計算をおこなっています。
明示的な型変換: 数値への変換方法
JavaScriptでは、文字列を数値に変換する複数の方法が提供されています。
これらの方法を理解することで、さまざまなシチュエーションでの型変換が容易になるでしょう。
- Numberオブジェクト利用解説
- parseInt関数利用解説
- parseFloat関数利用解説
Numberオブジェクト利用解説
Numberオブジェクトは、文字列を数値に変換するための基本的な方法のひとつです。
let str = "123";
let num = Number(str);
console.log(num); // 123ただし、数値に変換できない文字列を渡すと、NaN（Not a Number）が返されます。
parseInt関数利用解説
parseInt関数は、文字列を整数に変換する際に使用します。
let floatStr = "123.45";
let integer = parseInt(floatStr);
console.log(integer); // 123この関数は小数点以降を切り捨てて整数を返します。
parseFloat関数利用解説
parseFloat関数は、文字列を浮動小数点数に変換するために使用します。
let floatStr = "123.45";
let floatNum = parseFloat(floatStr);
console.log(floatNum); // 123.45暗黙の型変換について
JavaScriptは、型が明示されていない場合に、適切と判断した型へ自動的に変換する機能を持っています。
この変換の際に予期せぬ挙動が生じることもあるので、注意が必要です。
- +演算子による変換
- 注意すべきポイント
+演算子による変換
+演算子は、数値の加算だけでなく、文字列の連結にも使用されます。
これにより、暗黙の型変換がおこなわれます。
let num = 123;
let str = "456";
console.log(num + str); // "123456"注意すべきポイント
数値と文字列が混在する式では、期待とは異なる結果が得られることがあります。
例えば、"5" + 3は”53″となり、"5" - 3は2です。
このような挙動を避けるためには、型変換を明示的におこないましょう。
特殊ケース：数値のカンマ区切り
日常の業務や表示上で、数値をカンマ区切りの形式で表現することは一般的です。
このセクションでは、そのようなカンマ区切りの取り扱いについて説明します。
- 数値のカンマ区切りを文字列に変換
- カンマ区切り文字列を数値に変換
数値のカンマ区切りを文字列に変換
数値をカンマ区切りの文字列に変換する方法の一例として、toLocaleStringメソッドがあります。
let num = 1234567;
let formattedStr = num.toLocaleString();
console.log(formattedStr); // "1,234,567"カンマ区切り文字列を数値に変換
カンマ区切りの文字列を数値に変換するには、まずカンマを取り除く必要があります。
let str = "1,234,567";
let num = Number(str.replace(/,/g, ''));
console.log(num); // 1234567小数点の桁数変換の理解
JavaScriptで小数点以下の桁数を調整する基本的な方法として、toFixedメソッドを使用します。
let floatNum = 3.14159;
let twoDecimal = floatNum.toFixed(2);
console.log(twoDecimal); // "3.14"型変換エラーケース: NaNの処理方法
NaNは自身とも等しくないという特性を持っています。
そのため、NaNの判定はisNaN関数を使用してください。
let result = Number("Hello");
console.log(isNaN(result)); // true選択ガイド: どの変換方法を使うべきか
小数点を含む文字列を数値に変換する場合、parseIntよりparseFloatを使用すべきです。
let str = "12.34";
console.log(parseInt(str)); // 12
console.log(parseFloat(str)); // 12.34一歩を進んで: 日付と文字列操作
こちらでは、日付や文字列操作の基本を学びます。
JavaScriptにおいて、日付や文字列の操作も頻繁におこなわれるものです。
- 日付形式の調整
- 文字列操作の基本
日付形式の調整
Dateオブジェクトを使用して、日付のフォーマットを調整できます。
let date = new Date();
let formattedDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
console.log(formattedDate); // "2023-10-30" (例)
文字列操作の基本
文字列の切り出しや置換など、基本的な操作を理解することは非常に役立ちます。
let str = "Hello, World!";
let subStr = str.substring(0, 5);
console.log(subStr); // "Hello"まとめ
当記事では、JavaScriptの型変換や日付・文字列操作について学習してきました。
JavaScriptにおける型変換は、コードの動作を予測可能にするための鍵となります。
当記事で紹介した方法やガイドラインを頼りに、安全かつ効果的なコーディングを進めてください。