Code Tips‎ > ‎

JavaScript カンマ区切りフォーマット

カンマ区切りフォーマットの実装例です。

正規表現でオーソドックスに処理

オーソドックスなのは正規表現で「肯定的前方先読み」を使う方法。 RegExp - MDN
str.replace(/(\d)(?=(\d\d\d)+$)/g, "$1,");

関数化するならこんな感じ。値が文字列でも数値でもいいようにしています。
function addComma(val) {
	return ("" + val).replace(/(\d)(?=(\d\d\d)+$)/g, "$1,");
}

さらに数値チェックをするならこんな感じ。
function addComma(val) {
	if (isNaN(val)) {
		return this;
	}
	return ("" + val).replace(/(\d)(?=(\d\d\d)+$)/g, "$1,");
}
ただし、整数であることが条件です。


NumberオブジェクトのtoLocaleStringメソッドを使う

NumberオブジェクトのtoLocaleStringメソッドを使うと簡単です。

(123456789).toLocaleString()
//IE5-10→"123,456,789.00"
//IE11, Chrome37→"123,456,789"


(123456789.0123456789).toLocaleString()
//IE5-10→"123,456,789.01"
//IE11, Chrome37→"123,456,789.012"

…しかし
  • IE10以前のバージョンでは、整数でも強制的に小数部が2桁表示される
  • 小数の場合、オプションを指定しないと小数部が3桁になる
  • 文字通りLocaleに基づき表示を変えるので、パソコンの設定によっては結果が変わる
等の問題があります。

なお以下のようにオプションも書くと小数部分の表示桁数も指定できます。しかしIE10以前では対応していないようです。
(123456789.0123456789).toLocaleString("ja-JP", {minimumSignificantDigits : 5})
//IE5-10→"123,456,789.01"
//IE11, Chrome37→"123,456,789.012346"

小数値にも対応したバージョン

昔がんばって作ったもの。数値チェックの付加と、符号・小数点も考慮したので、まだ使えるかもしれません。
/**
 * カンマ区切りフォーマット関数
 */
String.prototype.addComma = function() {
	if (isNaN(this)) {
		return this;
	}
	return this.replace(
		/^([+-]?\d{1,3})((\d{3})+)((\.\d+)?)$/g,
		function() {
			return	arguments[1] +
				arguments[2].replace(/(\d{3})/g, ",$1") +
				arguments[4];
		}
	);
}

こっちの方がいいかな？
/**
 * カンマ区切りフォーマット関数
 */
function addComma(val) {
	if (isNaN(val)) {
		return this;
	}
	return ("" + val).replace(
		/^([+-]?\d{1,3})((\d{3})+)((\.\d+)?)$/g,
		function() {
			return	arguments[1] +
				arguments[2].replace(/(\d{3})/g, ",$1") +
				arguments[4];
		}
	);
}

もしくはこう。
function addComma(val) {
	if (isNaN(val)) {
		return this;
	}
	return ("" + val).replace(
		/^([+-]?\d{1,3})((\d{3})+)((\.\d+)?)$/g,
		function(s, p1, p2, p3, p4) {
			return p1 + p2.replace(/(\d{3})/g, ",$1") + p4;
		}
	);
}

数値チェックをなくすと1行でも書ける…。
function addComma(val) {
	return ("" + val).replace(/^([+-]?\d{1,3})((\d{3})+)((\.\d+)?)$/g, function(s, p1, p2, p3, p4) {return p1 + p2.replace(/(\d{3})/g, ",$1") + p4;});
}

余談

カンマ区切りフォーマットはごく当たり前に利用するものですが、その実装は本当にさまざまです。新入社員や正規表現を知らない人などが作るコードで、文字数分ループし「charAt」で一文字ずつ取り出して確認しながら新しい文字列にカンマを足していく…という原始的なコードをみかけることがあります。そういうコードだけは避けたほうがいいように思います。

2011/07/18
2011/12/08
2014/09/11