JavaScript

JavaScriptのsliceを使って数値を指定桁数で先頭からゼロ埋め表示する方法

JavaScriptのslice()を使って数値を指定桁数で先頭からゼロ埋め表示する方法をご紹介します。

数値を指定桁数で先頭からゼロ埋め表示するCSS記述

※ゼロ埋めされた数値の出力結果を表示するエリア(#output)のCSS記述です。必要に応じて変更して下さい。

<style>
body {
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1.8em;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.8em;
  padding: 15px 0;
}
#output{
  color: red;
  font-weight: bold;
}
</style>

数値を指定桁数で先頭からゼロ埋め表示するHTML記述

※ゼロ埋めされた数値の出力結果を表示するエリア(id=”output”)を用意します。

<h1>数値を指定桁数で先頭からゼロ埋めします。</h1>

<div>数値「123456」を10桁指定で、<br>ゼロ埋めした出力結果が以下になります。</div>
<br>
<div id="output"></div>

slice()を使って数値を指定桁数で先頭からゼロ埋め表示するJavaScriptの記述

※数値を指定桁数でゼロ埋めする関数digitAlignment(数値, 桁数)を用意します。$(‘文章エリア’).flipQuote({オプション})を記述します。slice()は配列の一部を指定範囲で返すメソッドです。slice(-桁数)は数値の末尾から指定桁数分返します。

<script>
// num:数値 digit:桁数
function digitAlignment(num, digit){
  var zeroFormat = (Array(digit).join('0') + num).slice(-digit);
  return zeroFormat;
}

//id="output"に出力結果(戻り値)を表示
document.getElementById('output').innerHTML=digitAlignment(123456, 10);
</script>

JavaScriptのsliceを使って数値を指定桁数で先頭からゼロ埋め表示するデモページ

JavaScriptのsliceを使って、数値を指定桁数で先頭からゼロ埋め表示するデモページ

 

※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。