JavaScriptで数値をカンマ区切りにする8選

はじめに
JavaScriptで数値をカンマ区切りにする方法
応用例とサンプルコード
注意点
カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptで数値をカンマ区切りにする8の方法が身につきます。

どんなプロジェクトでも活用できるように、詳しく解説していきます。

JavaScriptで数値をカンマ区切りにする方法

数値を見やすく表示するために、カンマ区切りに変換する方法を紹介します。

下記に5つの基本的な方法を示します。

○方法1：toLocaleString()を使う

toLocaleString()は、数値をカンマ区切りの文字列に変換するメソッドです。

非常に簡単に使えます。

const num = 1234567;
const formattedNum = num.toLocaleString();
console.log(formattedNum); // "1,234,567"

○方法2：正規表現を使う

正規表現を使って、数値をカンマ区切りに変換する方法です。

const num = 1234567;
const formattedNum = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
console.log(formattedNum); // "1,234,567"

○方法3：配列とjoin()を使う

数値を配列に変換し、join()を使ってカンマ区切りの文字列に変換する方法です。

const num = 1234567;
const numStr = num.toString();
const numArray = [];
for (let i = numStr.length - 1, j = 1; i >= 0; i--, j++) {
  numArray.unshift(numStr[i]);
  if (j % 3 === 0 && i !== 0) {
    numArray.unshift(",");
  }
}
const formattedNum = numArray.join("");
console.log(formattedNum); // "1,234,567"

○方法4：再帰関数を使う

再帰関数を利用して、数値をカンマ区切りに変換する方法です。

function formatNumber(num) {
  if (num.length <= 3) {
    return num;
  } else {
    return formatNumber(num.slice(0, -3)) + "," + num.slice(-3);
  }
}

const num = 1234567;
const formattedNum = formatNumber(num.toString());
console.log(formattedNum); // "1,234,567"

○方法5：Map関数を使う

配列のMap関数を利用して、数値をカンマ区切りに変換する方法です。

const num = 1234567;
const numStr = num.toString();
const formattedNum = [...numStr].reverse().map((digit, index) => {
  return (index + 1) % 3 === 0 && index !== numStr.length - 1 ? digit + "," : digit;
}).reverse().join("");
console.log(formattedNum); // "1,234,567"

応用例とサンプルコード

下記に、カンマ区切りを活用した応用例とそのサンプルコードを示します。

○応用例1：金額表示のカスタマイズ

金額を表示する際に、カンマ区切りに変換する方法を活用できます。

const price = 29900;
const formattedPrice = price.toLocaleString() + "円";
console.log(formattedPrice); // "29,900円"

○応用例2：テーブル内の数値をカンマ区切りにする

テーブル内の数値をカンマ区切りに変換する方法です。

<table id="dataTable">
  <tr>
    <td>1000</td>
    <td>23500</td>
  </tr>
  <tr>
    <td>56000</td>
    <td>987654</td>
  </tr>
</table>

<script>
const table = document.getElementById("dataTable");
const cells = table.getElementsByTagName("td");

for (let i = 0; i < cells.length; i++) {
  const num = parseInt(cells[i].innerText, 10);
  cells[i].innerText = num.toLocaleString();
}
</script>

○応用例3：グラフのラベル表示をカンマ区切りにする

グラフのラベル表示をカンマ区切りに変換する方法です。

ここでは、Chart.jsを使ったグラフ表示において、ラベルをカンマ区切りにしています。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: 'Sales',
      data: [12000, 19000, 3000, 5000, 2000, 3000],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          callback: function(value) {
            return value.toLocaleString();
          }
        }
      }
    }
  }
});
</script>
</body>
</html>