一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

JavaScriptで数字をカンマ区切りにする方法

今回はJavaScriptで数字をカンマ区切りにする方法について調査したときのことを書いておきたいと思います。

ここでやりたかったことは、

たとえば123456789という値を123,456,789という表示にしたい

って感じです。


今回、参考にさせて頂いた記事はこちら

http://okadao.blogspot.jp/2009/10/javascript3.html


なるほどって感じでした!すばらしいコードをありがとうございます。


早速コードを見ていくと

function addFigure(str) {
var num = new String(str).replace(/,/g, "");
while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
return num;
}
addFigure(123456789) //123,456,789が返ってくる


ふむ。ちゃんとカンマ区切りできますね。


ちょっとコードを追ってみます。

まず

var num = new String(str).replace(/,/g, "");

の部分。

これはこの関数に渡したstringにもしあらかじめカンマが含まれてた場合、全部消せっていう処理ですかね。
単純に123456789みたいなstringを渡す場合は省略してもよさげですな。


次に

while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));

の部分。

ここが一番大事な部分ですね。

まずループを考えずに123456789を普通にnumに入れて、

num.replace(/^(-?\d+)(\d{3})/, "$1,$2")

を実行したとします。

(-?\d+)は負の値も考慮してるから「-?」が入ってるんですかね。
マイナスはあってもなくても良いって意味になりますね。

んで、\d+は数字1個以上を表し、\d{3}は数字3桁を表すので、
上記の場合、$1には123456, $2には789が入り、その結果、numは123456,789となります。


そしてループがあるので、次に2回目の処理を考えます。

2回目はnum = 123456,789になっているので、

num.replace(/^(-?\d+)(\d{3})/, "$1,$2")

を実行すると、/^(-?\d+)(\d{3})/にマッチするのは123456の部分までなので、$1が123, $2が456となるはずです。
そしてその結果、「123,456」と特になんの処理も受けてない「,789」が合体して123,456,789がnumに入ります。


この処理はreplaceができなくなるまで繰り返されるので、その結果、数字をカンマ区切りにすることができると。


今回は人の書いたソースを解読しただけだったのですが、ただコピペするだけではなく、ちゃんと自分で理解して使う事に意義があると思います。
正規表現は自分も結構苦手なので、良い勉強になりました。


小さな事からコツコツと。