JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで文字列を数値に変換する方法を初心者向けに解説！Number・parseInt・parseFloatの使い方

JavaScriptにおける文字列から数値への変換とは？

JavaScriptでは、フォームに入力された値やAPIから取得したデータなど、文字列として扱われる数値を計算に使う場面が多くあります。その際は、文字列を明示的に数値へ変換する必要があります。主な方法としてNumber()関数を使う方法が基本ですが、状況に応じて他の方法も使い分けると便利です。

1. Number() 関数を使う方法

Number()は、引数として渡した文字列全体を数値に変換する最もシンプルな方法です。文字列の一部でも数字以外が含まれている場合は NaN（Not a Number）を返す点に注意しましょう。

以下のコードを実行すると、JavaScriptで文字列を数値に変換する動作を確認できます。

サンプルコード

<!DOCTYPE html>
<html>
  <body>
    <p>文字列を数値に変換する</p>
    <script>
      var myString = "123";
      document.write("Number : " + Number(myString)); // 結果: 123

      // 数値に変換できない場合は NaN を返す
      var invalidString = "Amit";
      document.write("Number : " + Number(invalidString)); // 結果: NaN
    </script>
  </body>
</html>

2. parseInt() を使う方法

parseInt()は、文字列の先頭から整数部分だけを読み取り、整数値に変換します。小数点以下は切り捨てられます。第2引数に基数（進数）を指定できるのも特徴です。

var num = parseInt("42px", 10); // 結果: 42
var num2 = parseInt("3.14");    // 結果: 3（小数部は切り捨て）

3. parseFloat() を使う方法

parseFloat()は、文字列内の浮動小数点数（小数を含む数値）を解析して返します。parseInt()と異なり、小数部分も保持されます。

var num = parseFloat("3.14abc"); // 結果: 3.14

4. 単項プラス演算子（+）を使う方法

+"123"のように単項プラス演算子を使うと、簡潔に数値へ変換できます。内部的にはNumber()とほぼ同じ挙動です。

var num = +"123";      // 結果: 123
var nan = +"Amit";     // 結果: NaN

変換時の注意点

  • 空文字列（""）はNumber()では 0 に変換されます。
  • 変換できない文字列はすべて NaN になるため、isNaN() でチェックするのが安全です。
  • ユーザー入力など不確実なデータを扱う場合は、必ず変換結果の検証を行いましょう。

まとめ

JavaScriptで文字列を数値に変換するには、Number()、parseInt()、parseFloat()、単項プラス演算子（+）といった複数の方法があります。整数ならparseInt()、小数を含むならparseFloat()、厳密な全体変換ならNumber()と、用途に応じて適切な方法を選択することが重要です。

  1. 文字列をJavaScriptオブジェクトに変換する方法【JSON.parse()の使い方】

    JavaScriptでJSON形式の文字列をオブジェクトに変換するには、JSON.parse()メソッドを使用します。このメソッドは、引数に渡された文字列を解析（パース）し、対応するJavaScriptオブジェクトを返します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Docum

  2. 【JavaScript】ゼロを含む文字列を数値に変換する方法をわかりやすく解説

    JavaScriptでは、ドット（.）やゼロを含む文字列を数値として扱いたい場面があります。例えば、次のような文字列があったとします。var stringValue="453.000.00.00.0000";このようにゼロや区切り文字を含む文字列をそのまま数値変換しようとすると、意図した結果になりません。そこで、replace()メソッドで不要なドットを取り除き、parseInt()で整数に変換するという2段階の処理を行います。var numberValue = parseInt(stringValue.replace(/\./gm, ''));コード全体の