数値を桁区切りで表示する(数値のカンマ区切り)|JavaScript

      2018/05/24

JavaScriptで数値を桁区切り(3桁毎のカンマ区切り)の文字列として出力する方法です。
ここでは数値を文字列に変換後、正規表現にマッチしたものを置換しています。

書式

"12345678".replace(/()(?=()+(?!))/g, '$1,');

数値のみしかないのであれば、下記でもOK。

"12345678".replace(/()(?=()+$)/g, '$1,');

実行結果

12,345,678

メモ

  • $1後方参照といい、マッチ結果が入る。
  • $1は文字列であること。"$1" + ","などの記述でもOK。
  • gグローバルマッチの意味。
正規表現 内容
a(?=b) 先読み。条件aに条件bが続く場合のみaにマッチする。結果はaのマッチのみ。
a(?!b) 否定先読み。条件aに条件bが続かない場合のみaにマッチする。結果はaのマッチのみ。

実行サンプル

<html>
<head>
<title>数値のカンマ区切り</title>
</head>
<body>
<script type="text/javascript">
var text = "1234567890".replace(/(\d)(?=(\d\d\d)+$)/g, "$1,");
document.write(text);

document.write("<br />");

var num = 123.01;
text = num.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
document.write(text);

// 上記は123.0が123になってしまう

document.write("<br />");

var num2 = 123.00;
var float_text = String(Math.ceil(num2)) + String(num2 + 0.00000001).substr(-9).substring(0, 3);
text = String(float_text).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
document.write(text);

</script>
</body>
</html>

実行結果

1,234,567,890
123.01
123.00

 - JavaScript/JSP