数値をカンマ区切りにする

数値をカンマ区切りにする – JavaScript

最終更新日: 2019年09月14日

JavaScript

いきなり注意！「数値を」と言っておきながら正確には「文字列で表現した数値を」使う。なので本当にint型の値をカンマ区切りにする場合には、いったん文字列に変換する必要があり。

var num = 10000;

var addedcomma = num.toString().replace(/(\d)(?=(\d{3})+$)/g , '$1,');

var addedcomma = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g , '$1,'); // こんな書き方もある

console.log(addedcomma); // "10,000"

var num = 10000;

var addedcomma = num.toString().replace(/(\d)(?=(\d{3})+$)/g , '$1,');

var addedcomma = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g , '$1,'); // こんな書き方もある

console.log(addedcomma); // "10,000"

「(?= )」って何?

「(?=」がAAAとBBBの間を拾う。

/(AAA)(?=(BBB))/

1	/(AAA)(?=(BBB))/

(数値1桁) 間 (数値3桁)の場合に一致する。

/(\d)(?=(\d{3}))/

1	/(\d)(?=(\d{3}))/

「+$」と続けることによって(数値3桁)が1回以上(で終了)の場合にあてはまり、

/(\d)(?=(\d{3})+$)/

1	/(\d)(?=(\d{3})+$)/

それが1グループとして繰り返すので

/(\d)(?=(\d{3})+$)/g

1	/(\d)(?=(\d{3})+$)/g

最後にreplace

replace(/(\d)(?=(\d{3})+$)/g, "$1,")

1	replace(/(\d)(?=(\d{3})+$)/g, "$1,")

「$1」は(?=…)の前にある(\d)を指し、「何らかの数値一つ,」と置き換える。

(?!\d)って何？

もうひとつの例について。

replace(/\B(?=(\d{3})+(?!\d))/g , '$1,')

1	replace(/\B(?=(\d{3})+(?!\d))/g , '$1,')

\B	単語の境界「以外の位置」	空白・カンマ・ピリオド・改行の前後を(単語の境界として)マッチの対象から除外
\d	1個の半角数字(0 〜 9)
(AAA)	グループ化括弧内の「文字列をひとつの塊として」扱う
{n}	文字の個数
+	直前の文字が1文字以上	(\d{3})+ で、連続した半角数字3つが、一回以上続く範囲にマッチ
(?=AAA)	AAAという文字列の「直前」	(?=)位置にマッチさせる
(?!AAA)	AAA「ではない文字列の直前」	(?=)の逆が(?!)。(?=(\d{3})+(?!\d))で、(後ろから数えて)数字でない文字の直前からスタート。連続した半角数字の3桁ずつをひとまとまりで数えていき、空白・カンマ・ピリオド・改行を除いた位置 (“1,000円”なら1,^000円)

実行例

与えられた文字列 →	“1000”	“1,000”	“1000000000”	“1000000.00”
(\d{3})+	100	000	100000000	100000
(\d{3})+(?!\d)	000	000	000000000	000000
(?=(\d{3})+(?!\d))	1^000	1,^000	1^000^000^000	1^000^000.00
\B(?=(\d{3})+(?!\d))	1^000	該当なし	1^000^000^000	1^000^000.00

API(Intl)を使う方法

こちらは数値(ちゃんとint型のもの)を文字列&カンマ区切りに変換してくれる。

var num = 12400;

var formatter = new Intl.NumberFormat('ja-JP');
var commastr = formatter.format(num);

console.log(commastr); // "12,400"

var num = 12400;

var formatter = new Intl.NumberFormat('ja-JP');

var commastr = formatter.format(num);

console.log(commastr); // "12,400"

金額とか、カンマ区切りの数値をJSで（正規表現を説明してもらった件）。

JavaScriptの正規表現で数値を3桁カンマ区切りの文字列に変更する

JavaScriptで数値フォーマットする標準API「Intl.NumberFormat」 (カンマ区切り、円・ドル表記、漢数字など)

コメントをするコメントをキャンセル

コメントはありません。