【JavaScript】文字列を数値に変換する方法の一覧!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年03月14日に投稿されました。)

JavaScriptでは「string ⇄ number」のように変数の型を変更することができます。

その中でも文字列を数値に変換することはよく使用する手法であり、プログラムを作成する上でも小技として使用することがあります。

例えば、入力した値を計算して計算後の値を表示するとなった場合、文字列型だと計算が行われないため一度数値型に変換して計算し、計算した結果を再び文字列型に戻して表示します。

このように「文字列型だと計算が行われない」などのように、その型でできることは限られており、1つの型だけでプログラムを作成することはとても難しいです。

そのため「文字列型を数値型に変換する」などのように、処理ができない場合は処理を行うことができる型に一度変換します。

そして、行いたい処理が実行できればその後に元の型に戻すというように型の変換をうまく利用するようにしましょう。

今回はJavaScriptで文字列を数値に変換する方法の一覧について紹介していきます。

この記事はこんな方におすすめ
・JavaScriptで文字列型の値を数値型に変換したい場合

文字列を数値に変換できたかどうかを確認するには

JavaScriptの場合、表示される値は同じであるため、画面上では文字列を数値に変換できたかどうかを確認することはできません。

そのため、ここでは文字列を数値に変換できたかどうかを確認できる下記の2つの方法についてご紹介します。

  1. typeof演算子を使用する
  2. プラス演算子(+)を使用する

typeof演算子を使用する

まず1つ目はtypeof演算子を使用する方法です。

typeof演算子とは、対象の値のデータ型を表す文字列を返す演算子となります。

例えば、文字列型である場合は「string」を返し、数値型である場合は「number」を返し、真偽値型である場合は「boolean」を返すようになります。

つまり、数値に変換した後にtypeof演算子を使用することで、文字列から数値に変換できたかどうか確認することができます。

● main.js

実行結果

typeof演算子で文字列から数値型に変換した値を確認した結果

typeof演算子によって指定した値の型を確認しています。

「153」は文字列型であるため「string」が、「156」は数値型であるため「number」が表示されています。

プラス演算子(+)を使用する

そして2つ目はプラス演算子(+)を使用する方法です。

プラス演算子とは、対象の値のデータ型を加算するために使用する演算子になります。

しかし、文字列に使用すると文字列の連結が行われるようになります。

例えば、数値に変換された値に対してプラス演算子を使用し、「数値型」だと加算された数値が表示され、「文字列型」だと連結された数値が表示されます。

つまり、数値型へと変換した後にプラス演算子を使用することで、文字列型から数値型に変換できたかどうか確認することができます。

● main.js

実行結果

+演算子で文字列から数値型に変換した値を確認した結果

プラス演算子を使用して指定した値の型を確認しています

「153」は文字列型であるため文字列の連結が行われて「15346」が、「156」は数値型であるため加算が行われて「202」が表示されています。

型変換のメソッドを使用して文字列を数値に変換する方法

型変換を行うため、 型変換のメソッドを使用することで文字列を数値に変換することができます。

そのため、ここでは型変換のメソッドを使用して文字列を数値に変換する方法についてご紹介します。

  1. parseInt()
  2. parseFloat()
  3. Number()

parseInt()

parseInt()とは、指定した文字列を整数の数値型に変換するメソッドになります。

指定した文字列型の値(string)を整数の数値型(number)へ変換することができます。

● main.js

実行結果

parseInt()で文字列を整数の数値に変換した結果

parseInt()で指定した文字列を整数の数値型に変換しています。

そのため、parseInt()の使用前は文字列型であることから「1567」が、使用後は数値型であることから「82」が表示されています。

もし、parseInt()について詳しく知りたい場合は下記の記事をご参考ください。

parseFloat()

parseFloat()とは、指定した文字列を浮動小数点数の数値型に変換するメソッドになります。

指定した文字列型の値(string)を浮動小数点数の数値型(number)へ変換することができます。

● main.js

実行結果

parseFloat()で文字列を浮動小数点数の数値型に変換した結果

parseFloat()で指定した文字列を浮動小数点数の数値型に変換しています。

parseFloat()の使用前は文字列型であることから「15.678967.8965」が、使用後は数値型であることから「83.5723」が表示されています。

もし、parseFloat()について詳しく知りたい場合は下記の記事をご参考ください。

Number()

Number()とは、指定した文字列をそのまま数値型に変換するメソッドになります。

指定した文字列型の値(string)を整数や浮動小数点数の数値型(number)へ変換することができます。

● main.js

実行結果

Number()で文字列をそのままの数値型に変換した結果

Number()で指定した文字列をそのままの数値型に変換しています。

Number()の使用前は文字列型であることから「1279」と「18.6789123.78」が、使用後は数値型であることから「91」と「142.4589」が表示されています。

Mathクラスのメソッドを使用して文字列を数値に変換する方法

Mathクラスのメソッドを使用しても文字列を数値に変換することができます。

Mathクラスは指定した値に対して計算結果を返すメソッドを待つクラスとなります。

そのため、指定した値が文字列である場合でも数値型に変換できる値であるならば数値型に自動で変換を行って、計算した結果を返すようになります。

そのため、ここではMathクラスのメソッドを使用して文字列を数値に変換する方法についてご紹介します。

  1. Math.trunc()
  2. Math.round()
  3. Math.ceil()
  4. Math.floor()

Math.trunc()

Math.trunc()とは指定した値の小数点以下を削除し、対象の値の整数部分を取得するメソッドになります。

指定した値が文字列型の値だったとしても小数点以下を削除し、対象の値の整数部分を数値型で返すようになります。

● main.js

実行結果

Math.trunc()で文字列の小数点以下を削除し、整数部分を数値型で取得した結果

Math.trunc()で指定した文字列の小数点以下を削除して、文字列から数値型に変換しています。

Math.trunc()の使用前は文字列型であることから「18.6789123.78」が、使用後は数値型であることから「141.78」が表示されています。

Math.round()

Math.round()とは指定した値の小数点以下を四捨五入し、対象の値の整数部分を取得するメソッドになります。

指定した値が文字列型の値だったとしても小数点以下を四捨五入し、対象の値の整数部分を数値型で返すようになります。

● main.js

実行結果

Math.round()で文字列の小数点以下を四捨五入し、整数部分を数値型で取得した結果

Math.round()で指定した文字列の小数点以下を四捨五入して、文字列から数値型に変換しています。

Math.round()の使用前は文字列型であることから「12.779」と「18.2789123.78」が、使用後は数値型であることから「92」と「141.78」が表示されています。

もし、 Math.round()について詳しく知りたい場合は下記の記事をご参考ください。

Math.ceil()

Math.ceil()とは指定した値の小数点以下を切り上げ、対象の値の整数部分を取得するメソッドになります。

指定した値が文字列型の値だったとしても小数点以下を切り上げ、対象の値の整数部分を数値型で返すようになります。

● main.js

実行結果

Math.ceil()で文字列の小数点以下を切り上げ、整数部分を数値型で取得した結果

Math.ceil()で指定した文字列の小数点以下を切り上げて、文字列から数値型に変換しています。

Math.ceil()の使用前は文字列型であることから「12.779」と「18.2789123.78」が、使用後は数値型であることから「92」と「141.78」が表示されています。

Math.floor()

Math.floor()とは指定した値の小数点以下を切り捨て、対象の値の整数部分を取得するメソッドになります。

指定した値が文字列型の値だったとしても小数点以下を切り捨て、対象の値の整数部分を数値型で返すようになります。

● main.js

実行結果

Math.floor()で文字列の小数点以下を切り捨て、整数部分を数値型で取得した結果

Math.floor()で指定した文字列の小数点以下を切り捨てて、文字列から数値型に変換しています。

Math.floor()の使用前は文字列型であることから「12.779」と「18.2789123.78」が、使用後は数値型であることから「92」と「141.78」が表示されています。

二項演算子を使用して文字列を数値に変換する方法

二項演算子を使用することでも文字列を数値に変換することができます。

二項演算子とは2つのオペランド(変数や定数)を取る演算子のことをいいます。

プラス演算子を使用すると文字列の連結が行われますが、それ以外の演算子を使用すると、計算した結果を返し、なおかつ文字列型から数値型へと自動で変換されるようになります。

しかし、こちらは自動で変換されることから「暗黙の型変換」と呼ばれており、バグが発生しやすくなるのであまりおすすめしておりません。

それでも良いと思う方はこちらの方法を使用してください。

ここでは、二項演算子を使用して文字列を数値に変換する方法についてご紹介します。

  1. マイナス演算子(-)
  2. 乗算演算子(*)
  3. 除算演算子(/)
  4. 乗除演算子(%)
  5. べき乗演算子(**)

マイナス演算子(-)

文字列に対してマイナス演算子(-)を使用すると、文字列の値に対して引き算が行われ、計算した値を文字列型から数値型に変換するようになります。

● main.js

実行結果

マイナス演算子を使用して指定した文字列を数値型に変換した結果

マイナス演算子で指定した文字列の値を計算し、文字列から数値型に変換しています。

そのため、マイナス演算子の使用前は文字列型であることから「12579」が、使用後は数値型であることから「204」が表示されています。

乗算演算子(*)

文字列に対して乗算演算子(*)を使用すると、文字列の値に対して掛け算が行われ、計算した値を文字列型から数値型に変換するようになります。

● main.js

実行結果

乗算演算子を使用して指定した文字列を数値型に変換した結果

乗算演算子で指定した文字列の値を計算し、文字列から数値型に変換しています。

そのため、乗算演算子の使用前は文字列型であることから「12579」が、使用後は数値型であることから「204」が表示されています。

除算演算子(/)

文字列に対して除算演算子(/)を使用すると、文字列の値に対して割り算が行われ、計算した値を文字列型から数値型に変換するようになります。

● main.js

実行結果

除算演算子を使用して指定した文字列を数値型に変換した結果

除算演算子で指定した文字列の値を計算し、文字列から数値型に変換しています。

そのため、除算演算子の使用前は文字列型であることから「12579」が、使用後は数値型であることから「204」が表示されています。

乗除演算子(%)

文字列に対して乗除演算子(%)を使用すると、文字列の値に対して余り計算が行われ、計算した値を文字列型から数値型に変換するようになります。

● main.js

実行結果

乗除演算子を使用して指定した文字列を数値型に変換した結果

乗除演算子で指定した文字列の値を計算し、文字列から数値型に変換しています。

そのため、乗除演算子の使用前は文字列型であることから「12579」が、使用後は数値型であることから「79」が表示されています。

べき乗演算子(**)

文字列に対してべき乗演算子(**)を使用すると、文字列の値に対してべき乗計算が行われ、計算した値を文字列型から数値型に変換するようになります。

● main.js

実行結果

べき乗演算子を使用して指定した文字列を数値型に変換した結果

べき乗演算子で指定した文字列の値を計算し、文字列から数値型に変換しています。

そのため、べき乗演算子の使用前は文字列型であることから「12579」が、使用後は数値型であることから「204」が表示されています。

文字列から数値への変換時にエラーが発生しても処理を継続するには

文字列から数値への変換時にエラーが発生しても処理を継続するにはtry-catch文を使用します。

try-catch文とは、エラーが発生した時の例外処理を意図的に処理することができる文法になります。

プログラムではエラーが発生するとその時点で処理が中断されるため、エラーが発生した後の処理をこちらで設定する必要があります。

例えば、try-catch文を使用していない場合のコードと結果は下記のようになります。

● main.js

実行結果

文字列から数値型への変換に失敗した場合の処置結果

parseInt()で値を数値へ変換しようとしましたが、parseInt()の引数にsdkは定義されていない変数を設定して実行しているため、エラーと判断しそこで処理が中断されています。

これがアプリやWeサイト上で発生するとどうでしょう?

勝手に処理が終了して落ちてしまい、ユーザーにとっては使いにくいアプリやWebサイトになってしまいます。

定義されていない変数が来ることはほぼないかと思いますが、プログラムであるため可能性はゼロではありません。

しかし、try-catch文を使用すると下記のようなコードと結果になります。

● main.js

実行結果

try-catch文を使用して文字列から数値型への変換に失敗した場合の処理結果

try-catch文を使用することで、文字列の変換に失敗したとしても例外のエラー処理を実行し、最後まで処理を継続しています。

また、エラーケースによる対応をしているため、通常と同じように処理が実行され、何が原因でエラーで終了したのかが明確になっています。

このようにプログラム上このメソッドには必ずこの値が来るとは限らないため、エラーが発生する場合のリスク対応も必要です。

そのため、「型の変換に失敗するかも」などのように「何かしらの原因でエラーが発生するのでは?」と思った場合はtry-catch文を使用して例外処理を追記するようにしましょう。

まとめ

⚫︎ 文字列を数値に変換できたかどうかを確認するには下記のような方法がある
・ typeof()演算子で確認
(文字列型だとstring、数値型だとnumberが返されるため)
・ プラス演算子(+)で確認
(文字列型だと文字列の連結、数値型だと加算が行われるため)

⚫︎ 型変換のメソッドを使用して文字列を数値に変換する方法だと下記の3つがある
・ parseInt()
・ parseFloat()
・ Number()

⚫︎ Mathクラスのメソッドを使用して文字列を数値に変換する方法だと下記の4つがある
・ Math.trunc()
・ Math.round()
・ Math.ceil()
・ Math.floor()

⚫︎ 二項演算子を使用して文字列を数値に変換する方法だと下記の5つがある
・ マイナス演算子(-)
・ 乗算演算子(*)
・ 除算演算子(/)
・ 乗除演算子(%)
・ べき乗演算子(**)

⚫︎ 文字列から数値への変換時にエラーが発生しても処理を継続するにはtry-catch文を使用する
(型の返還に失敗するとエラーとなりそこで処理が強制終了してしまうため)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA