iPentec.com  /  Doc  /  JavaScript

目次

数値を文字列に変換する - JavaScript

JavaScriptで数値を明示的に文字列に変換するコードを紹介します。

概要

JavaScriptで数値を明示的に文字列に変換する場合には以下の方法があります。
  • String 関数を利用する
  • toString メソッドを利用する
  • toFixed メソッドを利用する
  • 変換しない (暗黙の変換を利用する)

補足
文字列を数値に変換する処理はこちらの記事を参照してください。

方法: String 関数を利用する

書式

String(変換する数値)

プログラム例

コード

以下のHTMLを作成します。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function TestFunc() {
      var a = 100.5;
      var b = 200;
      var c = "Penguin";
      var d = "Duck";

      var ab = a + b;
      var ac = a + c;
      var cd = c + d;
      var sasb = String(a) + String(b);
      var sab = String(a) + b;

      document.forms.form1.text1.value = ab;
      document.forms.form1.text2.value = ac;
      document.forms.form1.text3.value = cd;
      document.forms.form1.text4.value = sasb;
      document.forms.form1.text5.value = sab;
    }
  </script>
</head>
<body>

  <form id="form1">
    <button type="button" onclick="TestFunc();">Exec</button><br />
    <input id="text1" type="text" /><br />
    <input id="text2" type="text" /><br />
    <input id="text3" type="text" /><br />
    <input id="text4" type="text" /><br />
    <input id="text5" type="text" /><br />
  </form>
</body>
</html>

解説

a,b,c,d 4つの変数を宣言します。a,b には数値の値を代入します。c,d には文字列の値を代入します。
  var a = 100.5;
  var b = 200;
  var c = "Penguin";
  var d = "Duck";

変数aとbの和を変数abに代入しています。
  var ab = a + b;

変数aとcの和を変数acに代入しています。
  var ac = a + c;

変数cとdの和を変数cdに代入しています。文字列同士の和となるため、文字列の結合処理になります。
  var cd = c + d;

変数aとbをString関数で文字列に変換後の和を変数sasbに代入しています。
  var sasb = String(a) + String(b);

変数aのみをString関数で文字列に変換後のbとの和を変数sabに代入しています。
  var sab = String(a) + b;

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


ページ内の[Exec]ボタンをクリックします。テキストボックスに下図の値が表示されます。


  • 一番上のテキストボックス var ab = a + b; の結果はそれぞれの値が数値として計算されたため、合計値の300がテキストボックスに表示されています。
  • 2番目のテキストボックスvar ac = a + c; の結果は、変数cが文字列のため、変数aの値も文字列として処理され文字列が連結された結果となり 100Penguin の値が表示されます。
  • 3番目のテキストボックスvar cd = c + d; はそれぞれが文字列の値のため、文字列が連結されたPneguinDuckの文字列が表示されます。
  • 4番目のテキストボックス var sasb = String(a) + String(b); はそれぞれが文字列に変換されるため、文字列が連結された結果である 100200が表示されます。
  • 5番目のテキストボックス var sab = String(a) + b; は変数aのみが文字列に変換されますが、片方が文字列となるため、変数bも文字列として扱われ、2番目のテキストボックスと同様の処理になり、文字列が連結された結果である 100200が表示されます。

String() 関数を利用して数値を明示的に文字列に変換できました。

方法: toString メソッドを利用する

書式

(変数).toString()
または
(変数).toString([変換する進数の数])

コード

以下のコードを記述します。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function TestFunc() {
      var a = 100.5;
      var b = 200;
      var c = "Penguin";
      var d = "Duck";

      var ab = a + b;
      var ac = a + c;
      var cd = c + d;
      var sasb = a.toString() + b.toString();
      var sab = a.toString() + b;

      document.forms.form1.text1.value = ab;
      document.forms.form1.text2.value = ac;
      document.forms.form1.text3.value = cd;
      document.forms.form1.text4.value = sasb;
      document.forms.form1.text5.value = sab;
    }
  </script>
</head>
<body>

  <form id="form1">
    <button type="button" onclick="TestFunc();">Exec</button><br />
    <input id="text1" type="text" /><br />
    <input id="text2" type="text" /><br />
    <input id="text3" type="text" /><br />
    <input id="text4" type="text" /><br />
    <input id="text5" type="text" /><br />
  </form>

</body>
</html>

解説

コードの大部分は先のString関数と同様の処理です。変換部分が (変数名).toString() の書式でtoStringメソッドを呼び出す記述になっています。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


ページ内の[Exec]ボタンをクリックします。テキストボックスに下図の値が表示されます。
4番目と5番目のテキストボックスの値は文字列に変換してから結合しているため、文字列の結合結果になります。

方法: toFixed メソッドを利用する

書式

(変数).toFixed()
または
(変数).toFixed([小数点以下の桁数])

コード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function TestFunc() {
      var a = 100.5;
      var b = 200;
      var c = "Penguin";
      var d = "Duck";

      var ab = a + b;
      var ac = a + c;
      var cd = c + d;
      var sasb = a.toFixed() + b.toFixed();
      var sab = a.toFixed() + b;

      document.forms.form1.text1.value = ab;
      document.forms.form1.text2.value = ac;
      document.forms.form1.text3.value = cd;
      document.forms.form1.text4.value = sasb;
      document.forms.form1.text5.value = sab;
    }
  </script>
</head>
<body>

  <form id="form1">
    <button type="button" onclick="TestFunc();">Exec</button><br />
    <input id="text1" type="text" /><br />
    <input id="text2" type="text" /><br />
    <input id="text3" type="text" /><br />
    <input id="text4" type="text" /><br />
    <input id="text5" type="text" /><br />
  </form>

</body>
</html>

解説

コードの大部分は先のString関数と同様の処理です。変換部分が (変数名).toString() の書式でtoStringメソッドを呼び出す記述になっています。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


ページ内の[Exec]ボタンをクリックします。テキストボックスに下図の値が表示されます。
4番目と5番目のテキストボックスの値は文字列に変換してから結合しているため、文字列の結合結果になります。

方法: 変換しない (暗黙の変換を利用する)

上記のコードの以下の部分は変数aが数値ですが、変数cが文字列であるため、aとcの和を取ると、aは文字列として処理され結果は100.5Penguinとなります。
aは暗黙で文字列型に変換される動作となります。
  var a = 100.5;
  var c = "Penguin";

  var ac = a + c;

上記の仕組みを利用して、以下のコードで文字列の値にできます。
暗黙の変換処理を利用するため、コードの可読性は若干落ちます。
  var a = 100.5;
  var a_str = a + '';
このページのキーワード
  • JavaScript 数値 文字列
  • JavaScript 数値 文字列 変換
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2023-12-25
改訂日: 2023-12-25
作成日: 2021-03-16
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.