数値を見やすく！JavaScriptで3桁カンマ区切りを実現する方法｜DAD UNION

今回は、JavaScriptを使って桁数の多い数値を3桁カンマ区切りに変換する方法を紹介します。
この記事は、初心者のエンジニアや技術にあまり詳しくない方でも理解しやすいように書いています。

過去記事「【PHP,JavaScript】簡単に数値を3桁カンマ区切りに表示する方法」を参考にしています。

Contents

変換前の数値（input）を表示するCSS記述
HTMLの記述
桁数の多い数値を3桁カンマ区切りに変換するJavaScriptの記述
JavaScriptで桁数が多い数値を3桁カンマ区切り有り・無しに変換するデモページ
まとめ

変換前の数値（input）を表示するCSS記述

まず、変換前の数値を表示するための簡単なCSSを設定します。必要に応じてカスタマイズしてください。

<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0;
  line-height: 1.6em;
}
h2{
  font-size: 18px;
  margin: 4px 0;
}
input{
  margin: 0 0 8px 0;
  text-align: center;
  width: 150px;
  font-size: 14px;
  padding: 4px;
  background-color:#cccccc;
  border: solid 1px #000000;
}
</style>

HTMLの記述

次に、HTMLで数値を入力し、変換結果を表示する部分を作成します。
「変換前：3桁カンマ区切り無し（name=”nocomma1″）」を出力先「変換後：3桁区切り有り（class=”threecomma1″）」、「変換前：3桁カンマ区切り有り（name=”threecomma2″）」を出力先「変換後：3桁区切り無し（class=”nocomma2″）」を用意しました。
以下のコードを参考にしてください。

<h1>JavaScriptで桁数の多い数値を3桁カンマ区切り有り・無しに変換</h1>

<h2>変換前：3桁カンマ区切り無し</h2>
<input type="text" name="nocomma1" value="12345678910" readonly="readonly">
<br>
↓
<br>
<h2>変換後：3桁区切り有り</h2>
<div class="threecomma1"></div>

<br>
<br>
<br>

<h2>変換前：3桁カンマ区切り有り</h2>
<input type="text" name="threecomma2" value="10,987,654,321" readonly="readonly">
<br>
↓
<br>
<h2>変換後：3桁区切り無し</h2>
<div class="nocomma2"></div>

桁数の多い数値を3桁カンマ区切りに変換するJavaScriptの記述

JavaScriptで桁数の多い数値を3桁カンマ区切りに変換する方法を紹介します。ここでは、jQueryを使用しますので、まずはjQueryのファイルを読み込みます。
jquery-1.9.1.min.jsファイルを読み込みます。「function threeComma(nocomma){～}」で3桁カンマ区切りに変換し、「function removeComma(threecomma){～}」で3桁カンマ区切り除去変換する処理を行ってます。

<script src="jquery-1.9.1.min.js"></script>
<script>
$(function () {
  var nocomma1 = $('input[name="nocomma1"]').val();
  $(".threecomma1").html(threeComma(nocomma1)); //3桁カンマ区切りに変換して出力

  var threecomma2 = $('input[name="threecomma2"]').val();
  $(".nocomma2").html(removeComma(threecomma2));  //3桁カンマ区切りを除去して出力

  //3桁カンマ区切り変換
  function threeComma(nocomma){
    return Number(nocomma).toLocaleString();
  }

  //3桁カンマ区切り除去
  function removeComma(threecomma){
    var nocomma = threecomma.replace(/,/g, '');
    return parseInt(nocomma, 10);
  }
});
</script>