JavaScriptで文字列を数値に変換する3つの方法|コード付き

※本サイトにはプロモーション・広告が含まれています。

(最終更新月:2023年12月)

✔このような方へ向けて書かれた記事となります

「Javascriptで文字列を数値にどう変換するのか知りたい」

「Javascriptで文字列と数値の変換の書き方を覚えたい」

「Javascriptを使った文字列・数値変換の具体的な実例が見てみたい」

✔当記事を通じてお伝えすること

  • Javascriptでの文字列から数値への変換の基本
  • 具体的な書き方とその応用
  • 実例を用いた文字列・数値変換

当記事では、Javascriptを用いて文字列を数値に変換する基本的な手法から応用まで、具体的な実例を交えて解説いたします。

ぜひ最後までお読みください。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロジェクトマネージャー/SE(元外資系金融機関営業)

【副業】ブログ(月間15万PV)/YouTube/Web・アプリ制作

コミュニケーション × ビジネススキル × 文章力 × プログラミングスキルを活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

JavaScriptとデータ型

こちらでは、JavaScriptとデータ型についてお伝えしていきます。

JavaScriptのデータ型について理解することで、効率的なプログラム作成に役立つでしょう。

  • データ型の概要とその意義
  • 文字列と数値の相違点
  • 現実の変換シナリオ

データ型の概要とその意義

JavaScriptには様々なデータ型が存在します。

  • string
  • number
  • boolean

データ型を正確に理解することは、変数の扱いや関数の実行、さらにはエラーを避けるために重要です。

実際のコード上では、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における型変換は、コードの動作を予測可能にするための鍵となります。

当記事で紹介した方法やガイドラインを頼りに、安全かつ効果的なコーディングを進めてください。

タイトルとURLをコピーしました