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

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

はじめに

JavaScriptで数値をカンマ区切りにする8つの方法を、この記事で詳しく解説します。

初心者から上級者まで、どんなプロジェクトでも活用できる技術を身につけられます。

数値を見やすく表示するテクニックは、ウェブ開発やデータ分析において非常に重要です。

それでは、具体的な方法を見ていきましょう。

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

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

基本的な5つの方法から始め、その後応用例も交えて説明していきます。

各方法には特徴があり、状況に応じて使い分けることが大切です。

○方法1：toLocaleString()を使う

toLocaleString()メソッドは、数値をカンマ区切りの文字列に変換する簡単で効果的な方法です。

このメソッドは、JavaScriptの標準機能であり、多くのブラウザで使用できます。

次のコードで、その使い方が分かります。

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

このコードを実行すると、数値1234567が”1,234,567″という形式で出力されます。

toLocaleString()は簡単に使えるため、初心者にも扱いやすい方法です。

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

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

この方法は、より細かい制御が必要な場合に適しています。

次のコードをご覧ください。

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

この方法では、正規表現を使って3桁ごとにカンマを挿入します。

正規表現に慣れていない方には少し難しく感じるかもしれませんが、柔軟性が高いのが特徴です。

○方法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"

このコードは、数値を文字列に変換し、それを1文字ずつ配列に格納します。

その過程で3桁ごとにカンマを挿入し、最後に配列を結合して文字列にします。

○方法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"

この再帰関数は、数値の末尾3桁を切り取り、残りの部分に対して同じ処理を繰り返します。

最終的に、全ての3桁の区切りにカンマが挿入されます。

○方法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"

このコードは、数値を文字列に変換し、それを配列に展開します。

その後、逆順にしてMap関数で処理し、再度逆順にして結合します。一見複雑に見えますが、慣れると非常に効率的な方法です。

●応用例とサンプルコード

これまでに紹介した方法を実際のシチュエーションで活用する例を見ていきましょう。

実践的な場面での使い方を理解することで、より深い知識を得ることができます。

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

オンラインショップやフィナンシャルアプリケーションでは、金額表示が重要です。

カンマ区切りを活用して、見やすい金額表示を実現できます。

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

この例では、toLocaleString()メソッドを使用して金額をフォーマットし、その後に通貨単位を追加しています。

これにより、ユーザーにとって読みやすい金額表示が可能になります。

○応用例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を使用したグラフにおいて、Y軸のラベルをカンマ区切りにしています。

<!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>

このコードでは、Chart.jsのオプション設定で、Y軸のティックラベルをカスタマイズしています。

callback関数内でtoLocaleString()メソッドを使用することで、ラベルの数値をカンマ区切りに変換しています。

●注意点

JavaScriptで数値をカンマ区切りに変換する際、いくつかの注意点があります。

まず、数値の型を文字列に変換する必要があることを忘れないでください。

また、変換後に計算を行う場合は、再度数値に変換することが重要です。

各方法によって、ブラウザの互換性やパフォーマンスが異なる場合があります。

プロジェクトの要件や対象ユーザーのブラウザ環境を考慮して、適切な方法を選択することが大切です。

●カスタマイズ方法

カンマ区切りの表示をさらにカスタマイズする方法もあります。

たとえば、toLocaleString()メソッドを使用する際に、オプションを指定することで、小数点以下の桁数を制御できます。

const num = 1234567.89;
const formattedNum = num.toLocaleString('ja-JP', {minimumFractionDigits: 2, maximumFractionDigits: 2});
console.log(formattedNum); // "1,234,567.89"

このコードでは、日本語のロケールを指定し、小数点以下を2桁に固定しています。

これにより、金額表示などで一貫性のある表示が可能になります。