【Javascript入門】数値⇔文字列の変換(toString/Number/parseInt)

こんにちは!Webコーダー・プログラマーの貝原(@touhicomu))です。

今回は、JavaScriptに限らずプログラミング全般において欠かすことができない「数値」をテーマにした学習をしていきましょう!

なかでも、特に初心者が間違いやすい「数値変換」のさまざまなテクニックについてゼロから解説をしていきます!

この記事では、

  • 「数値変換」とは?
  • 数値→文字列に変換
  • 文字列→数値に変換

という基礎的な知識から学習を進めていき、

  • カンマ区切りの数値変換について
  • 小数点の桁数変換について
  • 数値変換後のNaNを判定する
  • 日付のフォーマット処理

などの応用的な使い方に関しても解説していきます。この記事で、「数値変換」の概要をしっかりと学習して自分のスキルアップを目指しましょう!

「数値変換」とは?

それでは、最初に「数値変換」の基本的な知識を身につけるための学習を進めていきましょう!

JavaScriptでよく利用する数値変換としては、「数値」を「文字列」に変換したり…その反対で「文字列」を「数値」に変換するというケースがあります。

例えば、ユーザーがフォームに入力した数値をJavaScriptから取得すると「文字列」になっているため、まずは「数値」に変換してから処理を行うようなケースはよくあります。

数値→文字列に変換(toString)

まずは、「数値」を「文字列」に変換する方法から学習を始めましょう。

最も簡単な方法としては、Number型である数値をそのままStringオブジェクトの引数にしてしまうことです。次のサンプル例を見てください!

実行結果

この例では、変数「num」に数値である123を代入し、Stringの引数に指定することで文字列の「123」に変換しています。

「typeof」を使って「型」をチェックしてみると、実行結果にはNumber型からstring型に変わっているのが分かりますね。もう1つ簡単な方法としては、Numberオブジェクトのメソッドを活用するのがオススメです。

実行結果

こちらも同じように変数「num」を使うのですが、「 . (ドット)」で「toString()」メソッドを連結して文字列に変換しています。

実行結果は先ほどと同じなので、どちらの方法でも数値を文字列に変換できるのが分かりますね。

文字列→数値に変換(Number/parseInt)

次に、「文字列」を「数値」に変換する方法を学びましょう!

考え方としては、先ほどの「数値→文字列」の変換と同じようにString型である文字列をNumberオブジェクトの引数として代入すれはOKです!次のサンプル例を見てください!

実行結果

この例では、文字列「123」を変数「str」に代入し、その変数をNumberオブジェクトの引数に代入することで数値に変換しています。

実行結果を見ると、文字列「123」が数値の123に変換されているのが分かりますね。また、上記以外によく使う方法としては「parseInt()」があります。

実行結果

「parseInt()」の引数に文字列「123」を代入することで、そのまま数値へと変換することが出来るわけです。

どちらの方法もよく使う手法なので、実際に自分でもプログラミングしながら慣れておくようにしましょう!また、これらの変換手法は文字列を連結する際にもよく使います。

次の記事でその活用事例を学習するようにしておきましょう。

【JavaScript入門】joinや+演算子で配列や文字列を連結・結合する
更新日 : 2019年4月20日

カンマ区切りの数値変換について

ここからは、「数値」を扱う際に避けては通れない「カンマ区切り」について学んでいきましょう!

ここで言う「カンマ区切り」とは、例えば金額を表示する時に「1350円」とするよりも「1,350円」のように3桁区切りでカンマを付ける場合が一般的です。

そこで、JavaScriptプログラミングでよくあるケースとして、「数値」を「カンマ区切り」に変換する方法と、「カンマ区切り」を排除した元の数値に変換する方法を解説していきます!

普通の数値をカンマ区切りにする

まずは、通常の数値を「カンマ区切り」に変換する方法から学習しましょう!

最も簡単な方法としては、Numberオブジェクトの組み込みメソッドである「toLocaleString()」を使う手法があります。次のサンプル例を見てください!

実行結果

この例では、数値を変数「num」に代入し、続けて「toLocaleString()」を実行することで「カンマ区切り」に変換しているのが分かります。

この方法は、単純で分かりやくて良い方法なのですが、Safariなど一部のブラウザに対応していないので別の方法でも実現できるようにしておくのが不可欠です。

そこで、別の手段としては「正規表現」を活用するのが一般的でしょう。

実行結果

この例では、Stringメソッドの「replace」を使っているのですが、引数に正規表現パターンを当てはめているのが分かります。

この正規表現は、数字が3桁以内の場合に「$1」という変数に入れて置換するのですが、第2引数を見ると「$1,」のようにカンマが挿入されているのが分かります。これにより「カンマ区切り」を実現しているわけです。

ちなみに、正規表現がまだよく分からないという方は、わずか12個の特殊文字を覚えるだけで基礎を理解できる次の記事で詳しく解説しているので参考にしてみてください!

【JavaScript入門】4つのパターンで理解する正規表現の使い方まとめ!
更新日 : 2019年4月23日

また、小数点がある数値の場合は正規表現を「(\d)(?=(?!\.\d+)(\d{3})+(?!\d))(?=.*\.\d+)」のようにして、「. (ドット)」も検出するできるようにしてみましょう。

カンマ区切りの文字列を数値に変換

今度は反対に「カンマ区切り」で形成された数字の文字列を、通常の数値に変換する方法を学びましょう!と…言ってもこちらは簡単で、冒頭で解説した「文字列→数値」の考え方とほとんど同じです。

次のサンプル例を見てください!

実行結果

この例では、カンマ区切りの文字列「12,345」を変数「str」に代入し、「replace()」を使ってまずはカンマを削除しています。

その後に、Numberの引数として「str」が代入されているので数値に変換されるわけです。もちろん、Numberではなく「parseInt()」を使っても同じ結果になります。

実行結果

どちらの方法でも使えるように慣れておくと良いでしょう。

小数点の桁数変換について

ここからは、小数点を扱った数値変換についてご紹介していきます!なかでも、特に利用頻度が高い変換と言えば小数点以下の「桁数変換」でしょう。

方法については非常に簡単で、Numberオブジェクトの組み込みメソッドである「toFixed()」を使うことで実現できます。

次のサンプル例を見てください!

実行結果

この例では、小数点「12.345678」を変数「num」に代入し、「toFixed()」メソッドを使って指定した桁数に設定しているのが分かります。

「toFiexd(3)」と指定すれば小数点以下が3桁になり、何も指定しないと小数点以下が省略(四捨五入)されているのが分かりますね。

また、「toFixed()」には自動的に小数点以下を「0」で埋めてくれる機能もあります。

次のサンプル例を見てください!

実行結果

この例では、小数点「12.345」に対して「toFixed(6)」のように6桁を指定しているのですが、実行結果を見ると「12.345000」のように足りない部分を「0」で埋めてくれています。

また、小数点なしの数値「12」に対しても「toFixed(3)」とすることで、「12.000」のように「0」を追加してくれているのが分かりますね。これらの機能も合わせて覚えておくと良いでしょう。

数値変換後のNaNを判定する

JavaScriptでは、数値でないことを明示的に表す「NaN(Not a Number)」がありますが、今回のテーマである数値変換を行う時によく遭遇することでも知られています。

例えば、次のようなケースを見てください!

実行結果

この例では、これまで学習したように文字列「15px」をNumberオブジェクトの引数に代入することで数値変換しているわけですね。

しかしながら、実行結果は「NaN」と表示されてエラーになっています。これは、「15px」のように誤って「px」も一緒に数値変換しようとしたのが原因であり、つまりは「数値ではないので変換できません!」という警告なわけです。

これを気づかずにプログラミングしてしまうと予期せぬエラーが発生するので、事前に判定処理を挿入するのが一般的です。

よく使う手法としては「isNaN()」メソッドがあります。

実行結果

この例は先ほどのサンプルに「isNaN()」を使った判定処理を追加したものです。「isNaN()」の引数に判定させたい値を代入することで、もし「NaN」であれば「true」を返してくれるようになります。

このような判定を挿入していれば、予期せぬエラーを回避できるようになるのでぜひ覚えておきましょう!

ちなみに、「isNaN」についてのさらに詳しい解説とさまざまなケースにおける活用事例などを次の記事で解説しているので、ぜひ合わせて参考にしてみてください!

【JavaScript入門】数値チェックの方法まとめ(isNaN/isFinite)
更新日 : 2019年4月5日

日付のフォーマット処理総まとめ

日付のフォーマットを処理する方法はこちらの記事で詳しく解説しているので、ぜひ確認してください。

【JavaScript入門】日付のフォーマットを指定する方法まとめ
更新日 : 2019年4月23日

文字列の操作総まとめ

文字列の操作についてはこちらの記事で詳しく解説しているので、ぜひ確認してください。

JavaScriptの文字列操作(置換・連結・検索・比較など)を徹底解説!
更新日 : 2019年4月7日

まとめ

今回は、JavaScriptにおける「数値変換」について学習をしました!最後に、もう1度おさらいをしておきましょう。

  • 文字列はNumber()で数値化、数値はString()で文字列化できる
  • toLocaleString()か正規表現でカンマ区切りを実現できる
  • toFixed()で小数点以下の桁数を自在の操作できる
  • 「NaN」のエラー対処はisNaN()で防ぐことができる

上記内容を踏まえて、積極的にプログラムへ取り入れながら慣れておくようにしましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

貝原 輝昌

貝原 輝昌

こんにちは!貝原(@touhicomu)と申します。
現在は、Web業界のフリーランスとして、主にPHP/WordPress/BuddyPress/VPSサーバー構築などの業務を受注しています。
現住所は、日本の西海岸、長崎県は波佐見町です。田舎ライフです。^^
地元の観光団体「笑楽井石」にボランティアでほたる撮影会やそば塾などのスタッフとして参加させて頂いています。
以下の活動も行っています。
 ・笑楽井石のブログ
 ・エクセル関数を日本語化するソフト
 ・エクセルVBAを日本語で記述するソフト

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説