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

こんにちは！Webコーダー・プログラマーの貝原（@touhicomu））です。

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

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

この記事では、

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

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

「数値変換」とは？

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

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

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

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

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

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

var num = 123;
var result = String( num ); //引数に数値を代入

console.log( result );
console.log( typeof result );

実行結果

"123"
string

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

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

var num = 123;
var result = num.toString();

console.log( result );
console.log( typeof result );

実行結果

"123"
string

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

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

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

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

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

var str = '123';
var result = Number( str ); //引数に文字列を代入

console.log( result );
console.log( typeof result );

実行結果

123
number

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

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

var str = '123';
var result = parseInt( str );

console.log( result );
console.log( typeof result );

実行結果

123
number

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

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

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

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

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

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

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

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

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

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

var num = 12500;
var result = num.toLocaleString();

console.log( result );

実行結果

12,500

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

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

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

var num = 1234567;

//正規表現でカンマ区切りにする
var result = String(num).replace(/(d)(?=(d{3})+(?!d))/g, "$1,");

console.log( result );

実行結果

1,234,567

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

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

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

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

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

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

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

var str = '12,345';
var result = Number( str.replace(/,/, '') );

console.log( result );

実行結果

12345

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

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

var str = '12,345';
var result = parseInt( str.replace(/,/, '') );

console.log( result );

実行結果

12345

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

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

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

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

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

var num = 12.345678;

console.log( num.toFixed() );
console.log( num.toFixed(3) );

実行結果

12
12.346

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

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

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

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

var num1 = 12.345;
var num2 = 12;

console.log( num1.toFixed(6) );
console.log( num2.toFixed(3) );

実行結果

12.345000
12.000

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

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

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

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

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

var num = '15px';
var result = Number( num );

console.log( result );

実行結果

NaN

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

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

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

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

var num = '15px';
var result = Number( num );

if( isNaN( result ) ) {
  console.log('これは数値ではありません！');
}
else {
  console.log('これは数値です！');
}

実行結果

これは数値ではありません！

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

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

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

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

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

文字列の操作総まとめ

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

まとめ

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

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