数値と3桁カンマ区切り文字列とを相互変換するスクリプトの例

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

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

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

ます。

数字・カンマ・マイナス記号以外の文字は問答無用で全削除する仕様です。
なお、ここでは小数点が入っている数値は考慮していないので、(小数点も含めて削除してしまうため)正しく区切れません。(^_^;)

数値と3桁カンマ区切り文字列とを相互変換するJavaScriptソース

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

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

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

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

対象の数字文字列を引数に与えると、3桁ごとに区切ってカンマ記号を加えて返す関数です。
なお、与えられた数値がマイナスの場合には、「先頭のマイナス記号を除いた数値」だけを抜き出して3桁ごとに区切った上で、最後に「先頭にマイナス記号を追加」しています。(※そうしないと、マイナス記号も桁に含めてカンマ区切りにしてしまいますから「-123456」が「-,123,456」になってしまうためです。)

function addComma( targetNum ) {
	var retStr = "";     // 返す文字列の格納用
	var isMinus = false; // マイナスかどうかを示すフラグ

	// 先頭がマイナス記号かどうかを調べる
	if( targetNum.charAt(0) == '-' ) {
		isMinus = true;  // マイナスフラグを立てる
		targetNum = targetNum.replace(/-/g, "");  // マイナス記号を消す
	}

	var figLength = targetNum.length; // 対象の文字数(＝桁数)を数える
	var figCount = 0;                 // 処理桁数カウンタ

	// 最後の文字(＝右側の桁)から順にループ
	for( var i=figLength-1 ; i>=0 ; i-- ) {
		retStr = targetNum.charAt(i) + retStr;      // 現在の数字を左に加える
		figCount++;                                 // 桁数カウンタを進める
		if( ( figCount % 3 == 0 ) && ( i > 0 ) ) {
			// 3桁目に到達 かつ 残り文字数がまだあれば、カンマ記号を左に追加
			retStr = "," + retStr;
		}
	}

	// マイナス記号を消していれば再度加える
	if( isMinus ) {
		retStr = "-" + retStr;
	}

	return retStr;
}

6行目や16行目で使っているcharAtメソッドは、文字列中の指定位置の1文字を取り出すメソッドです。先頭は0なので、.charAt(0)が1文字目、.charAt(1)が2文字目、.charAt(2)が3文字目……のようになります。

▼3桁ごとにカンマ区切りにするメイン処理：

• 主に、11～22行目あたりが、3桁ごとにカンマ区切りするメイン処理です。
• for文によるループ(15行目)で、文字列の最後から先頭へ向かってループしているのは、数値の1桁目(＝文字列の最後)から順に桁数を調べていくためです。
• 「今、何桁目なのか」を変数figCountでカウントして(17行目)、3桁ごとに(＝3で割り切れる場合に)カンマ記号を挿入しています。(18～21行目)

▼マイナス記号がある場合の補足処理

• 6～9行目でマイナス記号があるかどうかを調べて前処理しています。
  • 6行目で、与えられた文字列の先頭がマイナス記号「-」かどうかをチェックしています。
  • 7行目で、マイナスの数値である旨を示すフラグを立てています。(3桁ごとに区切った後に処理が必要なため)
  • 8行目で、与えられた文字列内からマイナス記号を全削除しています。(正規表現で)
• 25～17行目でマイナス記号について後処理しています。
  • 25行目で、マイナス記号があったかどうかを(フラグを見て)調べています。
  • 26行目で、(事前に削除していた)マイナス記号を先頭に再度付加しています。

マイナス記号に関して回りくどい処理をしているのは、マイナス記号の存在を「3桁区切り」に含めてしまわないようにするためです。
もうちょっとスマートなコーディング方法があるような気もしますが。(^_^;;;

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

対象の文字列を引数に与えると、カンマ記号だけを取り除いて返す関数です。

function delComma( targetNum ) {
	return targetNum.replace(/,/g, "");	// カンマ記号だけを消す
}

わざわざ関数にするまでもないですね。(^_^;)
正規表現を使って、文字列中に含まれるカンマ記号「,」を一括削除しているだけです。ここでは、与えられた文字列が数値として適切かどうかは一切考慮していません。

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

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

function checkComma( targetId ) {
   // 対象文字列を得る
   var targetString = document.getElementById( targetId ).value;
   // 数字とカンマとマイナス記号以外は削除する
   targetString = targetString.replace(/[^\d,-]/g, "");
   if( targetString.indexOf(",") == -1 ) {
      // カンマ記号がなければ、カンマで区切る
      targetString = addComma( targetString );
   }
   else {
      // カンマ記号があれば、カンマ記号を除外する
      targetString = delComma( targetString );
   }
   // 変換結果を書き戻す
   document.getElementById( targetId ).value = targetString;
}

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

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

……という処理です。

正規表現を使って特定の文字以外を削除する方法に関しては「入力された文字列に含まれる空白文字を削除する方法」などもご参照下さい。[^\d,-]という記述が、数字(\d)とカンマ(,)とマイナス(-)以外という意味です。
(ここでは、文字列の先頭以外の場所にマイナス記号があっても許容してしまいますが、3桁ごとにカンマ区切りを実行するaddComma関数内でマイナス記号を一時的に削除する過程で余計なマイナス記号も削除されるので、あまり問題にはなりません。)

数値の入力欄と、JavaScriptを実行するボタンを作るHTMLソース

なお、HTMLは以下のように記述しています。

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

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

実際に活用する際には、もうちょっとエラー処理を追加した方が良いと思いますが。^^;

あと、「小数点が含まれる場合の処理」は加える必要があるでしょうね。(^_^;) それはちょっと面倒だったので省きました。(^_^;;;
たぶん、前処理として「小数点を見つけたらそれより右側を一時的に分離しておいて、整数部分を3桁ごとにカンマ区切りした後で、小数点とその右側を再度結合する」というような処理で良いかな、と思います。(小数点以下ってカンマでは区切りませんよね？)

(更新日：2017年06月16日)