JavaScriptで桁数が多い数値を3桁カンマ区切り有り・無しに変換｜DAD UNION

JavaScriptで桁数が多い数値を3桁カンマ区切り有り・無しに変換する方法をご紹介します。
過去記事「【PHP,JavaScript】簡単に数値を3桁カンマ区切りに表示する方法」を参考にしました。

Contents

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

変換前の数値（input）を表示する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>

桁数が多い数値を3桁カンマ区切り有り・無しに変換する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の記述

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