指定した桁数の先頭を0で埋める - JavaScript
JavaScriptで指定した桁数の先頭を0で埋めて整形するコードを紹介します。
概要
指定した桁数の文字列を作成する場合に、桁が足りない場合、上の位に0を追加して桁数をそろえたい場合があります。
この記事では、JavaScriptで指定した桁数を0で埋めるコードを紹介します。
実装方法1: padStart メソッドを利用する
pasStartメソッドを利用する方法を紹介します。
padStartメソッドの詳細は
こちらの記事を参照してください。
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function Exec1() {
var mynumber = 232;
var inputStr = mynumber.toString();
var result = inputStr.padStart(6, "0");
var elem_out = document.getElementById("output1");
elem_out.innerHTML = result;
}
function Exec2() {
var elem_in = document.getElementById("input1");
var input = elem_in.value;
var inputStr = input.toString();
var result = inputStr.padStart(4, "0");
var elem_out = document.getElementById("output1");
elem_out.innerHTML = result;
}
</script>
</head>
<body>
<h1>桁を0で埋めるデモ</h1>
<button onclick="Exec1();">実行1</button>
<hr />
<p>入力</p>
<input id="input1" type="text" />
<button onclick="Exec2();">実行2</button>
<hr />
<div id="output1"></div>
</body>
</html>
解説
実行1ボタン
実行1ボタンをクリックすると、
Exec1() 関数を呼び出します。
mynumber変数に代入した"232"を0で埋めて6桁にします。
初めに
toString()メソッドを呼び出し文字列に変換します。
続いて、
padStart()メソッドを呼び出します。第一引数に与えた文字の長さの文字列を返します。
長さが足りない場合は文字の先頭に、第二引数の文字("0")を追加して長さを揃えます。
結果の文字列を
id="output1" の要素に表示します。
function Exec1() {
var mynumber = 232;
var inputStr = mynumber.toString();
var result = inputStr.padStart(6, "0");
var elem_out = document.getElementById("output1");
elem_out.innerHTML = result;
}
実行2ボタン
実行2ボタンをクリックすると、
Exec2() 関数を呼び出します。
Exec2()メソッドではテキストボックスに入力した文字列を取得し、4桁にします。
先の例と同様に、
padStart()メソッドを呼び出し、4桁にそろえ、文字列の長さが足りない場合は先頭に第二引数に与えた文字("0")を追加します。
function Exec2() {
var elem_in = document.getElementById("input1");
var input = elem_in.value;
var inputStr = input.toString();
var result = inputStr.padStart(4, "0");
var elem_out = document.getElementById("output1");
elem_out.innerHTML = result;
}
実行結果
上記のHTMLをWebブラウザで表示します。下図のページが表示されます。
[実行1]ボタンをクリックします。"232"を6桁に整形して0を埋めた "00232" がページ下部に表示されます。
続いて、下部のテキストボックスに値を入力します。"21"を入力しました。入力後[実行2]ボタンをクリックします。
入力した文字列"21"を4桁に整形して0を埋めた"0021"がページ下部に表示されます。
実装方法2: slice メソッドを利用する
sliceメソッドを利用する方法を紹介します。
sliceメソッドの詳細はこちらの記事を参照してください。
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function Exec1() {
var mynumber = 164;
var inputStr = mynumber.toString();
inputStr = "00000000" + inputStr;
var result = inputStr.slice(-8);
var elem_out = document.getElementById("output1");
elem_out.innerHTML = result;
}
function Exec2() {
var elem_in = document.getElementById("input1");
var input = elem_in.value;
var inputStr = input.toString();
inputStr = "00000" + inputStr;
var result = inputStr.slice(-5);
var elem_out = document.getElementById("output1");
elem_out.innerHTML = result;
}
</script>
</head>
<body>
<h1>桁を0で埋めるデモ (slice版)</h1>
<button onclick="Exec1();">実行1</button>
<hr />
<p>入力</p>
<input id="input1" type="text" />
<button onclick="Exec2();">実行2</button>
<hr />
<div id="output1"></div>
</body>
</html>
解説
実行1ボタン
実行1ボタンをクリックすると、
Exec1() 関数を呼び出します。
mynumber変数に代入した"164"を0で埋めて8桁にします。
初めに
toString()メソッドを呼び出し文字列に変換します。
続いて、8桁の0 "00000000"の文字列を先頭に追加します。
追加した文字列に対し
slice() メソッドを呼び出します。第一引数に負の値を与えると末尾から数えた文字数の部分文字列を返します。
結果の文字列を
id="output1" の要素に表示します。
function Exec1() {
var mynumber = 164;
var inputStr = mynumber.toString();
inputStr = "00000000" + inputStr;
var result = inputStr.slice(-8);
var elem_out = document.getElementById("output1");
elem_out.innerHTML = result;
}
実行2ボタン
実行2ボタンをクリックすると、
Exec2() 関数を呼び出します。
Exec2()メソッドではテキストボックスに入力した文字列を取得し、5桁にします。
先の例と同様に、5桁の0の文字列 "00000" を入力文字列の先頭に追加し、
slice()メソッドを呼び出し、末尾から5文字を抜き出します。
結果は
id="output1" の要素に表示します。
function Exec2() {
var elem_in = document.getElementById("input1");
var input = elem_in.value;
var inputStr = input.toString();
inputStr = "00000" + inputStr;
var result = inputStr.slice(-5);
var elem_out = document.getElementById("output1");
elem_out.innerHTML = result;
}
実行結果
上記のHTMLをWebブラウザで表示します。下図のページが表示されます。
[実行1]ボタンをクリックします。"164"を8桁に整形して0を埋めた "00000164" がページ下部に表示されます。
続いて、下部のテキストボックスに値を入力します。"48"を入力しました。入力後[実行2]ボタンをクリックします。
入力した文字列"48"を5桁に整形して0を埋めた"00048"がページ下部に表示されます。
0を埋めて指定した桁数に整形できました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
