JavaScriptで桁数が多い数値を3桁カンマ区切り有り・無しに変換する方法をご紹介します。
過去記事「【PHP,JavaScript】簡単に数値を3桁カンマ区切りに表示する方法」を参考にしました。
Contents
ディスプレイ広告
変換前の数値(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>
JavaScriptで桁数が多い数値を3桁カンマ区切り有り・無しに変換するデモページ
JavaScriptで桁数が多い数値を3桁カンマ区切り有り・無しに変換するデモページ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。