【jQueryのプラグインを作ろう！】

第7回「数値を3桁ごとに区切って表示しよう」
＊これはascii.jpで連載した記事の続きです。このため、このページを読む前にあらかじめascii.jpで連載した記事をお読み下さい。

text : 古籏一浩

■数値表示の処理

　価格／値段／売り上げなどを示す場合は数値を3桁ごとに区切って表示するのが一般的です。数値を自動的に3桁ごとに区切って表示するHTMLタグやスタイルシート機能は標準では用意されていません。そこで今回は数値を3桁ごとに区切って表示するプラグインを作成してみましょう。

■3桁ごとに区切る

　3桁ごとに数値を区切る方法はいくつかあります。詳しくは以下の新JavaScript例文辞典を参照してください。

新JavaScript例文辞典
（計算のカテゴリ）

　ここではシリアルで処理していくタイプのものにしました。これだと3桁に限らず4桁でも5桁でも任意の桁ごとに区切ることができるためです。
　また、プラグインの名前はcomma3としました。
　プラグインで処理するテキストは必ず数値のみで構成されている、というのが大前提です。つまり123456であれば問題ありませんが、123456円や￥123456となっている場合には正しく動作しません。つまり<span>123456</span>であれば正しく動作するが、<span>123456円</span>のように囲んでしまうとうまく動作しないということです。これは、読み出した文字の数に応じて処理を行っているためです。同様に<span>123<b>456</b><span>のように不要なタグが入っている場合も正しく動作しません。
　この点だけに注意すれば、問題ありません。

　完成したプラグインのソースリストを以下に示します。

【プラグインのソース】

/* 3桁カンマプラグイン for jQuery
2009.1 By KaZuhiro FuRuhata  */
$.fn.comma3 = function(){
	return this.each(function(){
		var num3string = (function(num){
				var str = new String(num);
				var n = "";
				var count = 0;
				for (var i=str.length-1; i>=0; i--){
					n = str.charAt(i) + n;
					count++;
					if (((count % 3) == 0) && (i != 0)) n = ","+n;
				}
				return n;
			})(this.innerHTML);
		this.innerHTML = num3string;
	});
}

■実際に使ってみよう

　それでは作成したプラグインを使ってみましょう。
　最初にjQueryライブラリファイルを読み込ませたあとにプラグインファイルを読み込ませます。

	<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="js/comma3.js"></script>

　次に3桁ごとに区切りたい数値を囲んでいるスタイルシートクラス名を指定します。ここではnum3というクラス名で囲まれた数値のみ3桁で区切るようにしています。

$(".num3").comma3();

　これで数値が3桁ごとに区切られカンマ付きで表示されるようになります（サンプルを実行する）。