PHPのnumber_format()、JavaScriptのtoLocaleString()を使って簡単に数値を3桁カンマ区切りに表示する方法をご紹介します。
Contents
ディスプレイ広告
PHPまたはJavaScriptを使って簡単に数値を3桁カンマ区切りに表示するCSS記述
※必要に応じて変更して下さい。
<style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 20px; padding: 20px 0 0 0; line-height: 1.8em; } h2{ font-size: 18px; padding-top: 20px; } h3{ font-size: 16px; padding-top: 20px; } ul,li{ list-style: none; margin: 0; padding: 0; font-size: } </style>
PHPのnumber_format()、JavaScriptのtoLocaleString()を使って簡単に数値を3桁カンマ区切りに表示するHTML記述
※「PHPのnumber_format()使って数値を3桁カンマ区切り表示」と「JavaScriptのtoLocaleString()を使って数値を3桁カンマ区切り表示」する2パターンの方法を用意しました。どちらも3桁以下の数値はカンマ「,」区切りになりません。「PHPのnumber_format()使って数値を3桁カンマ区切り表示」する方法は number_format(数値) とするだけで簡単ですね。
<h1>PHPのnumber_format()、JavaScriptのtoLocaleString()を使って数値を3桁カンマ区切りに表示してます。</h1> <h2>PHPのnumber_format()使って数値を3桁カンマ区切り表示</h2> <h3>3桁カンマ区切り無し</h3> <ul> <li>10000</li> <li>9</li> <li>7777777</li> <li>333</li> <li>12345678910</li> </ul> <h3>3桁カンマ区切り有り</h3> <ul> <li><?php echo number_format(10000); ?></li> <li><?php echo number_format(9); ?></li> <li><?php echo number_format(7777777); ?></li> <li><?php echo number_format(333); ?></li> <li><?php echo number_format(12345678910); ?></li> </ul> <br> <hr/> <h2>JavaScriptのtoLocaleString()を使って数値を3桁カンマ区切り表示</h2> <h3>3桁カンマ区切り無し</h3> <ul> <li>10000</li> <li>9</li> <li>7777777</li> <li>333</li> <li>12345678910</li> </ul> <h3>3桁カンマ区切り有り</h3> <ul class="comma"> <li>10000</li> <li>9</li> <li>7777777</li> <li>333</li> <li>12345678910</li> </ul>
toLocaleString()を使って簡単に数値を3桁カンマ区切りに表示するJavaScriptの記述
※jquery-1.9.1.min.jsファイルを読み込みます。Number(‘表示エリアから取得した数値’).toLocaleString()と表示するだけです。
<script src="jquery-1.9.1.min.js"></script> <script> $('ul.comma li').each(function(){ var commatxt = $(this).text(); $(this).text(Number(commatxt).toLocaleString()); }); </script>
PHPのnumber_format()、JavaScriptのtoLocaleString()を使って数値を3桁カンマ区切りに表示するデモページ
PHPのnumber_format()、JavaScriptのtoLocaleString()を使って数値を3桁カンマ区切りに表示するデモページ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。