2009年10月6日火曜日

javascriptで数値を3桁区切りで表示する方法

ネットショップなどで金額を3桁毎にカンマで区切って表示させる場合があります。他方、消費税、合計金額の計算も必要で、DBにカンマ付きの文字列として格納することにも計算時にカンマを取り除かねばならないという不便さがあります。DBにはカンマ区切りのない数値として格納し、ブラウザ側のjavascriptやサーバー側のjava、phpでは数値として計算に使用し、ブラウザでjavascriptを用いて表示させる時にのみ3桁区切りすることが適切かと思います。

ところで、javascriptで数値を3桁区切りする場合、下記のとおり、正規表現というのを用いて行うのが簡単です。


function addFigure(str) {
var num = new String(str).replace(/,/g, "");
while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
return num;
}


上記プログラムを解説します。


var num = new String(str).replace(/,/g, "");
は、str文字列のカンマ(,)をすべて""で置き換え、その結果をnumに代入するというコードです。replace(",", "")だとstr文字列中の最初のカンマ(,)のみを取り除くことができます。正規表現で記述すると、replace(/,/, "")です。str文字列の全てのカンマ(,)を取り除くには、gオプションをつけて、replace(/,/g, "")と記述します。

while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
続いて、num.replace(/^(-?\d+)(\d{3})/, "$1,$2")部分を解説します。

正規表現では最初の「()」と次の「()」の値を$1、$2で取得することができます。^(-?/d+)でnumの前からの数字を取得し、後で$1として参照できます。(\d{3})でnumの後ろから3桁分の数字を取得し、後で$2として参照できます。なお、^(-?/d+)の部分は、numの後ろから3桁分として(\d{3})で切り出された部分を除いた数字が入ります。また、/^(-?\d+)(\d{3})/は元のnumが抽出されます。

例えばnum="123456789"の場合、$1には"123456"、$2には"789"が入ります。/^(-?\d+)(\d{3})/は"123456789"です。
/^(-?\d+)(\d{3})/の値と"$1,$2"が交換されることで、num.replace(/^(-?\d+)(\d{3})/, "$1,$2") = "123456,789"となります。

while(num != (num = ... ))の部分で、numが"123,456,789"となるまで繰り返します。

return num;

で、関数の呼び出し元に3桁区切りされた文字列が戻り値として返されます。

ご質問のある方は気楽に問い合わせてください。

有限会社フランシスホープ 岡田 治

okadao@francis-hope.jp

パノラマの撮影制作サービスのフランシスホープ

Follow okadao on Twitter

0 件のコメント:

コメントを投稿