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

JavaScriptで数値をカンマ区切りに変換するサンプルコードJS
この記事は約8分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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>

注意点

  • JavaScriptで数値をカンマ区切りに変換する際、数値の型を文字列に変換する必要があります。
    変換後に計算を行う場合は、再度数値に変換することを忘れずに。
  • 各方法によって、ブラウザの互換性やパフォーマンスが異なることがあります。
    使用する状況に応じて適切な方法を選択してください。

カスタマイズ方法

カンマ区切りの表示をカスタマイズする方法を紹介します。

例えば、toLocaleString()を使って、小数点以下の桁数を指定することができます。

まとめ

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

さらに、応用例やカスタマイズ方法も紹介しました。

記事を読んで、下記のことがを紹介しました。

  1. toLocaleString()を使って数値をカンマ区切りにする
  2. 正規表現を使って数値をカンマ区切りにする
  3. 配列とjoin()を使って数値をカンマ区切りにする
  4. 再帰関数を使って数値をカンマ区切りにする
  5. Map関数を使って数値をカンマ区切りにする

また、カンマ区切りに変換した数値を活用して、金額表示のカスタマイズやテーブル内の数値表示、グラフのラベル表示などの応用例を実装する方法を学びました。

各方法にはそれぞれ特徴があり、使用する状況に応じて適切な方法を選択することが重要です。

この記事が、JavaScriptで数値をカンマ区切りに変換する方法を理解し、実践する際の参考になれば幸いです。