Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:46.

数値と3桁カンマ区切り文字列とを相互変換する方法

桁数の多い数値を掲載する場合は、3桁ごとにカンマ記号を使って区切ると読みやすくなります。
しかし、プログラム中で数値として取り扱いたい場合は、カンマ記号が含まれていると困ります。
そこで、「カンマ記号の含まれない数値」と「3桁ごとにカンマ記号で区切った数字」とを相互に変換するJavaScriptを用意しておくと便利かも知れません。

プログラムが出力した数値には、人間が読みやすいように「3桁ごとにカンマ記号を付加」し、
人間が入力した「3桁ごとにカンマ記号が打たれた数字」は、プログラムが数値として扱えるように「カンマ記号を取り除いた数値」に変換します。


上記のサンプルでは、入力欄に適当な桁数の数値を入れた後、「カンマ記号の挿入・除外」ボタンを押すと、

  • 数字だけが入っている場合は、3桁ごとにカンマ記号で区切り、
  • カンマ記号が含まれている場合は、カンマ記号を取り除き

ます。
なお、小数点が入っていると数値は考慮していないので、正しく区切れません。また、数字以外の文字列が入っている場合も、特に考慮していません。

ここでは、以下の3つの関数を作成しています。

  1. 3桁ごとにカンマ記号を加える関数
  2. カンマ記号を取り除く関数
  3. 対象の文字列を調べて、カンマ記号を加える(=1を実行する)のか取り除く(=2を実行する)のかを判断する関数

JavaScriptソースは以下の通りです。

3桁ごとにカンマ記号を加える関数 addComma

対象の数字文字列を引数に与えると、3桁ごとに区切ってカンマ記号を加えて返す関数です。数字以外の文字列が与えられた場合などのエラー処理は何もしていません。(^_^;)

function addComma( targetNum ) {
   var retStr = ""; // 作成する文字列を格納
   var figCount = 0; // 処理桁数カウンタ
   var figLength = targetNum.length; // 対象の文字数

   // 最後の文字から逆順にループ
   for( var i=figLength-1 ; i>=0 ; i-- ) {
      retStr = targetNum.charAt(i) + retStr;
      figCount++;
      if( ( figCount % 3 == 0 ) && ( i > 0 ) ) {
         // 3桁目に到達かつ、残り文字数がまだあれば、カンマを追加
         retStr = "," + retStr;
      }
   }
   return retStr;
}

for文によるループで、文字列の最後から先頭へ向かってループしているのは、数値の1桁目(=文字列の最後)から順に桁数を調べていくためです。
「今、何桁目なのか」を変数figCountでカウントして、3桁ごとに(=3で割り切れる場合に)カンマ記号を挿入しています。
charAtメソッドは、文字列中の指定位置の1文字を取り出すメソッドです。0が1文字目、1が2文字目、2が3文字目……のようになります。

カンマ記号を取り除く関数 delComma

対象の文字列を引数に与えると、カンマ記号だけを取り除いて返す関数です。文字列を1文字ずつ順番に見て、カンマ記号以外をすべてコピーするだけの処理です。数字とカンマ記号以外の文字列があっても特に考慮していません。(^_^;)

function delComma( targetNum ) {
   var retStr = ""; // 作成する文字列を格納
   // 先頭の文字から順にループ
   for( var i=0 ; i<targetNum.length ; i++ ) {
      if( targetNum.charAt(i) != "," ) {
         // カンマ記号でなければコピー
         retStr = retStr + targetNum.charAt(i);
      }
   }
   return retStr;
}

先のaddComma関数とは違って、こちらは特に文字列を逆順に見ていく必要はないので、1文字目から順にループしています。

対象の文字列を調べて、カンマ記号を加えるのか取り除くのかを判断する関数 checkComma

上記で作成した addComma関数か delComma関数か、どちらを実行するのかをチェックする関数です。
引数には、対象文字列が格納されている入力欄(input要素)のid名を指定します。

function checkComma( targetId ) {
   // 対象文字列を得る
   var targetString = document.getElementById( targetId ).value;
   if( targetString.indexOf(",") == -1 ) {
      // カンマ記号がなければ、カンマで区切る
      targetString = addComma( targetString );
   }
   else {
      // カンマ記号があれば、カンマ記号を除外する
      targetString = delComma( targetString );
   }
   // 変換結果を書き戻す
   document.getElementById( targetId ).value = targetString;
}

ここで実行していることは、

  1. 指定のid名が割り振られている要素のvalue属性値を(getElementByIdメソッドで)取得して、
  2. そこにカンマ記号が含まれているかどうかを(indexOfメソッドで)調べて、
  3. カンマ記号がなければ、3桁ごとにカンマ記号で区切る関数 addComma を実行。
  4. カンマ記号があれば、カンマ記号を取り除く関数 delComma を実行。
  5. 変換結果の文字列を、指定のid名が割り振られている要素のvalue属性値に書き戻す。

……という処理です。
なお、HTMLは以下のように記述しています。

<input type="text" id="SampleNumberForm" value="" />
<input type="button" value="カンマ記号の挿入・除外" onclick="checkComma('SampleNumberForm');" />

input要素で入力欄を作って、id名に「SampleNumberForm」と付けています。
さらに、input要素で作ったボタンで、checkComma関数を実行させています。(引数には、上記で付けたid名「SampleNumberForm」を指定)

実際に活用する際には、もうちょっとエラー処理を追加した方が良いと思いますが。^^;
少なくとも、「数値に関係のない文字列が入っていた場合」とか、「小数点が含まれる場合の処理」とかは加える必要があるでしょうね。
※冒頭に掲載したサンプルでは、HTML的にそのまま表示すると危険な記号群(<とか>とか)だけは問答無用で削除するようにしてあります。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど