[Javascript] 数値資料でよく使う3桁ごとにカンマを入れるアレをネイティブ関数化

2019年12月14日

Javascript テクノロジー プログラミング

10年以上ビジネスWEBサービスに携わってきて、同じ様なコードを幾度となく書いてきて辟易としていた、ユゲタです。 他のエンジニアにそんな時はどうしているか聴いてみた所、そういうかゆいところに手が届くようなライブラリを見つけてインクルードしているのだそうだ。 多くの場合はjQueryで間に合うのだが、ビジネスツール系だとそれでも入っていない機能などは山のようにある。 逆転の思考で、そういうライブラリを作って公開したら、同じ境遇の人が使ってくれるとも思えた。 そんなわけで、このブログでも幾度となくやっている数値を3桁ずつにカンマリングするアレをネイティブ関数化してみました。

ソース

// 数値(文字列)の","(カンマ)を削除する(数値→文字列になる) if(typeof Number.prototype.numberFormat === "undefined"){ Number.prototype.numberFormat = function(num){ // 文字列変換 var str = (num || num === 0) ? String(num) : String(this); // 全角->半角変換 str = str.replace(/。/g , "."); str = str.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 65248); }); // マイナス判定 var minus = (str[0] === "-") ? true : false; // 数値 .(ピリオド) -(マイナス)以外の文字列を削除 str = str.replace(/[^0-9\.]/g,""); // マイナス処理 str = (minus) ? "-" + str : str; // 整数値と少数値の分離 var sp = str.split("."); var int = sp[0]; var float = (sp[1]) ? sp[1] : ""; // 整数 : 3桁ごとにカンマを入れる var tmpStr = ""; while (int != (tmpStr = int.replace(/^([+-]?\d+)(\d\d\d)/,"$1,$2"))){int = tmpStr;} // 小数 : 3桁ごとにスペースを入れる var tmpStr = ""; while (float != (tmpStr = float.replace(/(\d\d\d)(\d+)$/,"$1 $2"))){float = tmpStr;} // 返り値 var num = int + ((float) ? "."+float : ""); return num; }; } // // 整数 : 3桁ごとにカンマを入れる if(typeof Number.prototype.numberFormat_int === "undefined"){ Number.prototype.numberFormat_int = function(num){ var num = (num || num === 0) ? String(num) : String(this); var tmpStr = ""; while (num != (tmpStr = num.replace(/^([+-]?\d+)(\d\d\d)/,"$1,$2"))){num = tmpStr;} return num; }; } // 小数 : 数値の3桁ごとにスペースを入れる if(typeof Number.prototype.numberFormat_float === "undefined"){ Number.prototype.numberFormat_float = function(num){ var num = (num || num === 0) ? String(num) : String(this); if(!num){return 0;} var tmpStr = ""; while (num != (tmpStr = num.replace(/(\d\d\d)(\d+)$/,"$1 $2"))){num = tmpStr;} return num; }; }

使い方

headタグなどに事前に読み込んでおいて、以下のように数値に対して関数を実行すればいいだけ。 Number(-1234.5678).numberFormat() > "-1,234.567 8" ネイティブ関数ですが、Number関数で指定しなければならないのが、数値データの悲しいサガです・・・

あとがき

この手の数値の特性として、整数値はカンマ区切り、少数値はスペース区切りにするという点がありそれにも対応しています。 もちろん、マイナス値にも対応しているので、これでビジネス用としては問題ないでしょう。 おまけとして、整数値と少数値を別々に処理できる関数もつけておいたので、個別に使うような場合はそちらをお使いください。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。