Edited at

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

More than 3 years have passed since last update.

※下記、「整数で」という前提ですのでご了承くださいませ★

(後日、小数についても考えてみます。)

JavaScript - 「金額とか、カンマ区切りの数値をJSで。」のつづき。小数点も考えてみたんだけどね...。 - Qiita に、検討結果を書いてみました。よろしければご参考まで...。(2015.12.22))

金額とかで数値を使う場合、受け取ったデータそのままではなく、3桁区切りでカンマ区切りしないとですよね。

数値をカンマ区切りにする場合、JSで正規表現でやろうとするとこうなるそうで。


[該当する数値].toString().replace(/(\d)(?=(\d{3})+$)/g , '$1,');

私がわからなかったのが


/(?=(hoge))/

の部分。

で、エンジニアさんたちによってたかって詳しく解説してもらいました。


?=で、「間」を拾う

そもそもの区切りは、


/(fuga)(?=(hoge))/

なんだそう。

上記の書き方で、?=が、fugahogeの間を拾ってくれるそうです。

なので、


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

で、「数字1桁」と「数字3桁」の間を拾ってもらえます。


後ろから、再帰的に拾う

あとは後ろから区切っていけばよいわけで。


/(fuga)(?=(hoge)+$)/

末尾が$なので、fugaと、1個以上のhogeで終わってる場合に、間を拾ってくれます。


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

「数字1桁」間「数字3桁」終。

コレをリピしたいから、


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

「数字1桁」(間「数字3桁」)←ココくりかえし 終。

みたいな感じ(わかりやすい書き方できないかなコレ...)。


最後に、置き換える

ということで拾えたら、


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

この場合の$1(\d)

リピートが入っちゃってるのでわかりにくいけど、「間の前の数字」が$1に入ってる感じです。

なので

「数字1桁」(,「数字3桁」)←ココくりかえし 終。

という感じで、間に「,」を入れることに成功するのでした。

あ。正規表現使うので、ココは文字列じゃないとダメです。数値型だとNG。

なので、最終的には


[該当する数値].toString().replace(/(\d)(?=(\d{3})+$)/g , '$1,');

という形になるのでした。

4人掛かりで教えてくださったエンジニアのみなさん、ありがとうございました♪