【PHP,JavaScript】簡単に数値を3桁カンマ区切りに表示する方法｜DAD UNION

PHPのnumber_format()、JavaScriptのtoLocaleString()を使って簡単に数値を3桁カンマ区切りに表示する方法をご紹介します。

Contents

PHPまたはJavaScriptを使って簡単に数値を3桁カンマ区切りに表示するCSS記述
PHPのnumber_format()、JavaScriptのtoLocaleString()を使って簡単に数値を3桁カンマ区切りに表示するHTML記述
toLocaleString()を使って簡単に数値を3桁カンマ区切りに表示するJavaScriptの記述
PHPのnumber_format()、JavaScriptのtoLocaleString()を使って数値を3桁カンマ区切りに表示するデモページ

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>