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

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

Contents

数値を指定桁数で先頭からゼロ埋め表示するCSS記述
数値を指定桁数で先頭からゼロ埋め表示するHTML記述
slice()を使って数値を指定桁数で先頭からゼロ埋め表示するJavaScriptの記述
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>