数値を3桁区切りのカンマ文字列にフォーマット

JavaScirptで金額などの数値を3桁区切りのカンマ文字列にフォーマットする方法です。

3桁区切りのカンマ文字列にフォーマットする関数の例。

// フォーマット（カンマ）
function formatComma(v) {

  // 数値のチェック
  if(v == null || !v.toString().match(/^[+-]?[0-9.]+$/)){
    return v;
  }

  // 整数部と小数部を分離
  var arr = v.toString().split(".");

  // 整数部のフォーマット
  var rtn = arr[0].replace(/\B(?=(\d{3})+$)/g, ",");

  // 小数部の連結
  if(arr[1] != null){
    rtn += "." + arr[1];
  }

  return rtn;
};

上記のコードは小数を含んだ数値にも対応しています。

実際に整数部の数値をフォーマットしているのは以下のコード。

[string].replace(/\B(?=(\d{3})+$)/g, ",");

重要なポイントは文字列の末尾のマッチ $ は指定していますが、先頭のマッチ ^ は指定していない点。

末尾のマッチのみを指定した上で、?= を使った先読みを利用すると、右側の桁から3桁毎 (?=(\d{3})+ にカンマが挿入されます。

先読みを利用した正規表現は、実際に使ってみて動作に慣れないと分かり難いと思います。

また、先頭の「\B」も重要で、これがない場合は、3桁や6桁などの桁数の数値で先頭にカンマが追加されてしまいます。（123 ⇒ ,123、123456 ⇒ ,123,456）

「\B」はイメージしにくいですが、「\b」の否定表現と覚えておくと分かりやすく、「\b」や「\B」は文字の境界を表します。

「oar」という単語を例にすると、「\b」と「\B」がマッチする箇所は以下の通り。

つまり、上述の「/\B(?=(\d{3})+$)/g」という正規表現では、「123」や「123456」は「1」の左側に「\B」がないので、その位置にカンマは挿入されませんが、「1234」や「1234567」は「1」と「2」の間に「\B」があるので、カンマが挿入されます。

なお、「\b」や「\B」でマッチした部分は文字ではなく境界なので、長さは0となります。この点は結構重要で、先読み同様にreplace()メソッドで数値を置換してしまわないためにも、この指定の仕方が必要です。

上記の関数を利用して動作確認してみた結果は以下の通り。

console.log(formatComma(1234567890));    // 1,234,567,890
console.log(formatComma(-1234567890));   // -1,234,567,890
console.log(formatComma(1234.5));        // 1,234.5
console.log(formatComma(0.1234));        // 0.1234
console.log(formatComma(0));             // 0
console.log(formatComma(1));             // 1
console.log(formatComma(12));            // 12
console.log(formatComma(123));           // 123
console.log(formatComma(1234));          // 1,234
console.log(formatComma(12345));         // 12,345
console.log(formatComma(123456));        // 123,456
console.log(formatComma(1234567));       // 1,234,567
console.log(formatComma(null));          // null
console.log(formatComma(undefined));     // undefined
console.log(formatComma("テスト1234"));  // テスト1234

大丈夫そうですね。

コード例で示した関数はあくまでサンプルで、整数しか処理しないのであれば、もっと単純にできます。

• 正規表現 - JavaScript | MDN