実装案
[1] toLocaleString()で実装 [2] 正規表現で実装 [3] ループで実装(他のサイト参照)http://qiita.com/zawascript/items/922b5db574ef2b126069
http://so-zou.jp/web-app/tech/programming/javascript/grammar/data-type/string/comma-formatting.htm
[4] JavaScriptフレームワークで実装http://www.buildinsider.net/web/angularjstips/0019
=> メリット・デメリットを踏まえて、選択した方がいい => ここでは、[1]と[2]を考える。
[1] toLocaleString()で実装
メリット
* 簡単に実装できる
デメリット
* ブラウザやバージョンによって、対応していないものや動きが変わることがあるらしい * 小数の場合、オプションを指定しないと小数部が3桁になる * Localeに基づき表示を変えるので、パソコンの設定によっては結果が変わるhttp://am-yu.net/2014/11/09/number_tolocalestring/
より このメソッド自体は昔から(IE6にも)あったようなのですが、IE10以前だと結果は下記のように、 小数点以下2桁まで記述した文字列になってしまいます。 var num = 123456789; num.toLocaleString(); //=> "123,456,789.00"http://qiita.com/BEMU/items/93769e7ab84f6199b23f
SafariやOpera、古いブラウザは対応していないものもあるので注意してください。
[2] 正規表現で実装
* 正規表現については、以下の関連記事を参照のこと。http://blogs.yahoo.co.jp/dk521123/34640242.html
メリット
* ブラウザ依存がなく実装できる
デメリット
* [1]と比較すると難易度が高く、考慮する事が多い(サイトをコピペしただけでは痛い目に合う) [考慮する事] 数値は... * マイナス(-)も許容する or しない? * 整数のみ or 小数含む? * その他別要素(単位など)が含まるか?
サンプル
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <script src="">http://code.jquery.com/jquery-1.10.1.min.js"> </head> <body> <form> <div id="sample1">[1] toLocaleString()で実装</div> <div id="sample2">[2] 正規表現で実装</div> Input data:<input id="textValue" type="text" size="50" value="-1234567890.1234567890"> <input id="fire" type="button" value="click me!"> </form> <script type="text/javascript"> $("#fire").click(function(event){ var numberValue = document.getElementById("textValue").value; // [1] toLocaleString()で実装 document.getElementById("sample1").innerHTML = Number(numberValue).toLocaleString(); // [2] 正規表現で実装 document.getElementById("sample2").innerHTML = numberValue.replace(/^(-?[0-9]+)(?=\.|$)/, function(s){ return s.replace(/([0-9]+?)(?=(?:[0-9]{3})+$)/g, '$1,');}); }); </script> </body> </html>
出力結果
IE11 の場合-1,234,567,890.123 -1,234,567,890.1234567890
参考文献
http://www.m-bsys.com/code/javascript-commaformat正規表現で実装
http://d.hatena.ne.jp/babu_babu_baboo/20090825/1251166167
toLocaleString()で実装
http://ja.stackoverflow.com/questions/2582/javascript%E3%81%A7%E6%95%B0%E5%80%A4%E3%82%92%E3%82%AB%E3%83%B3%E3%83%9E%E5%8C%BA%E5%88%87%E3%82%8A%E3%81%A7%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95