【JS】 JavaScript で数値のカンマ区切りを実装するには...

実装案

[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
SafariOpera、古いブラウザは対応していないものもあるので注意してください。

[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