【JavaScript】数値と文字列の置換方法について解説!

JavaScriptの学習を始めてコードを書いていると、

文字列になった数字を数値に変換したい

数値を文字列に変換した

という場面が出てくることがあります。

そこで今回はJavaScriptで文字列、数値それぞれの変換方法について、

数値から文字列への変換方法

文字列から数値への変換方法

をご紹介しますので、ぜひ参考にしてみてくださいね。

数値から文字列への変換方法

JavaScriptでは、同じ数字であっても「型」が異なれば別のものとして扱われますよね。

例えば、文字列型の数字と数値型の数字を結合した場合などです。

【JavaScript】文字を結合させる方法を解説!

思い通りの処理を実行するために、型をしっかりと把握し、必要に応じて文字列型、数値型に変換をする必要があります。

そのための方法がいくつかありますが、今回はその中からいくつかをご紹介します。

まずは数値から文字列への変換方法です。

String

Stringは、文字通り「文字列に変換」をしてくれます。

実際に例を見ていきましょう。

上記のコードをブラウザのコンソール上で実行すると、下記の内容が出力されます。

“123”

「” “」がついているので、「文字列」として扱われていることがわかります。

※console.logで出力してしまうと「123」でしか出力されず型が判別がつかないため、コンソール上で実行してみてください。

toString

では次に、Stringと似ているtoStringプロパティです。

こちらもStringと同じ挙動をしますが、違う点は「進数」を選択できる点です。

進数ですが、私たちが普段使っている数字は10進数。(0〜9の数字を使う)

カラーコード でよく使われる「00ffcc」は、16進数。(0〜9の数字とa〜fのアルファベットを使う)

コンピューターの世界の最小単位は2進数です。(0と1だけを使う)

ここでは解説しませんが、興味がある方は下記のサイトをご覧ください。

【具体例あり】2進数と16進数の違い・変換方法とは?

では、実際に例を見ていきましょう。

上記のコードをそれぞれ実行すると、コンソールには下記の内容が出力されます。

“123”

“7b”

123という数字を16進数で表現することで「7b」となりました。

2進数で表現すると「1111011」となります。

※進数は今はわからなければ無理に理解する必要はありません。ある程度理解が進んだら再度チャレンジしてみてください。

toFixed()

これも基本的にはtoStringと同じですが、引数での指定した場合の処理が異なります。

小数点以下の数値に対して、引数で指定した桁数で四捨五入をし、それを文字列に変換します。

引数が空、もしくは0を指定した場合は小数点以下1位の数値を四捨五入します。

例をみた方が理解が早いですので、早速みていきましょう。

上記のコードをそれぞれ実行すると、コンソールには下記の内容が出力されます。

“123”

“123”

“123.5”

“123.46”

空文字を足す

今度はプロパティではなく、数値の前に””を結合させる方法です。

こちらも例を見ていきましょう。

上記のコードを実行すると、コンソールには下記の内容が出力されます。

“123”

この方法の特徴は、記述がシンプルである点なんですが、実はそれ以上に「処理が早い」という利点もあります。

とはいえ1秒以下での差ではありますので、1度だけの実行であれば体感速度はほぼ同じです。

ですが、膨大な量の処理が必要となった場合は、体感できるほどの差はでてきます。

文字列から数値への変換方法

次に、文字列から数値への変換方法をみていきましょう。

Number

一番シンプルに数値へ変換してくれます。

例をみていきましょう。

上記のコードをコンソールで実行すると、下記の内容が出力されます。

123

12

NaN

parseInt()

こちらも基本的には同じですが細かいところで処理が異なります。

実際に使った例をみていきましょう。

上記のコードを実行すると、コンソールには下記の内容が出力されます。

50

40

63

5

文字列”050″は、数値の50、さらに8進数で表現すると40になるので、そのように変換されましたね。

文字列”0x3F”は、自動的に16進数に変換されて63になりましたね。

また、Numberでは「NaN」と処理されていた「”5月”」ですが、こちらでは「5」に変換されています。

このように、全く同じではないのでご注意ください。

parseFloat()

最後にparseFloatメソッドです。

こちらも似てはいるものの、やはり細かい処理が異なります。

文字列の中に文字が出てくるまでの数字を数値に変換してくれます。

ただし、数値として使用される「+」「-」「.」「e」などは数値として認識されます。

これも例をみていきましょう。

上記のコードを実行すると、コンソールには下記の内容が出力されます。

50

50

0

5

まとめ

以上、今回は

数値から文字列への変換方法

文字列から数値への変換方法

についてご紹介しました。

基本的な挙動が似ていても、細かい点での処理の違いがバグの元になりますで、しっかり使いこなせるようになりましょう。