指定の桁数になるまで「0」などの文字で埋めて桁数を揃える方法

時刻や日付を掲載する際、「1桁の数値」を「2桁の文字列」に整形して桁数を統一したいことがあります。例えば「6月12日」ではなく「06月12日」のように。この場合、「どんな数値も2桁にする(＝2桁になるまで先頭に「0」を加える)」という処理が必要です。
他にも、7桁と8桁が混在する口座番号を8桁に統一するため「7桁だったら先頭にゼロを入れたい」のように、ユーザの入力を補完する際にも桁数の統一処理が必要になる場面がありそうです。
また、桁数を統一するために付加したい文字は「0」とは限らず、例えば「*」(アスタリスク)だったり「 」(空白文字)だったりすることもあるでしょう。
そこで、「指定の桁数になるまで、文字列の先頭に指定文字を付加する」(＝ゼロを指定すればゼロで埋める)というJavaScriptを用意しておくと便利かも知れません。

指定桁になるまで、先頭に指定文字を加えるサンプル

以下のサンプルでは、入力された文字列(※数値でなくても何でも構いません)に対して、指定の桁数よりも短い場合には、指定の桁数になるまで先頭に指定文字(デフォルトでは「0」)を付加します。

上記のサンプルでは、入力欄に適当な桁数の数値や文字列を入れた後、「指定の桁数になるまで埋める」ボタンを押すと、

• 入力された文字数が、指定桁数よりも少ない場合は、指定桁数になるまで「埋める文字」が追加される。
• 入力された文字数が、指定桁数と同じか、それよりも多い場合は、何もしない。

という処理が行われます。
「埋める文字」はデフォルトでは「0」ですが、「*」でも「 」(空白文字)でも何でも構いません。ただ、「埋める文字」欄に複数文字(2文字以上)を入力すると、指定桁数を超えてしまいます。(その点のチェックはしていません。^^;)

指定桁になるまで、先頭に指定文字を加えるJavaScriptを作る準備(入力欄)

まずは、HTMLで入力欄を3つ作成します。上から順に、「対象の文字列(数値)」の入力欄、「揃えたい桁数を指定」する選択欄、「埋める文字」の入力欄です。それぞれ、JavaScript側から参照するため、id名を付加しています。

■何か入力：<input type="text" id="SampleNumberForm" value="123">
■指定桁数：<select id="SamplePaddingFigure"><option value="2">2桁</option>
<option value="3">3桁</option>
<option value="4">4桁</option>
<option value="5" selected>5桁</option>
<option value="6">6桁</option>
<option value="7">7桁</option>
<option value="8">8桁</option>
<option value="9">9桁</option>
<option value="10">10桁</option>
</select>
■埋める文字：<input type="text" id="SamplePaddingChar" value="0" size="1">

桁数の選択肢は、select要素とoption要素を使ったプルダウンメニューの形で作成していますが、単純にinput要素を使った入力欄にしても良いと思います。
なお、最後に、以下のようにJavaScriptを実行するためのボタンも作成します。

<input type="button" value="指定の桁数になるまで埋める" onclick="prePadding('SampleNumberForm', 'SamplePaddingFigure', 'SamplePaddingChar');">

これ以下で作成する関数prePaddingを呼び出しています。引数には、「対象文字列の入力欄に割り振ったid名」・「桁数の選択欄に割り振ったid名」・「埋める文字の入力欄に割り振ったid名」の3つを順に指定します。詳しくは、下記の『JavaScript関数2』を参照して下さい。

指定桁になるまで、先頭に指定文字を加えるJavaScriptを作る(関数)

さて、ここでは、以下の2つのJavaScript関数を作成しています。短く書こうと思えばもっと短くできますが、ここでは読みやすさを重視して冗長に書きました。

JavaScript関数1： 指定桁になるまで、先頭に指定文字を加える

まずは、指定の桁数になるまで先頭に指定文字を加える関数です。引数は3つで、「対象の文字列」・「揃えたい桁数」・「加えたい文字」の順です。

// ▼指定桁になるまで、先頭に指定文字を加える
function addChars( targetNum, setFigure, setChar ) {
   var targetFigure = targetNum.length; // 対象の現在の桁数を得る
   var addZeros = "";
   // 先頭に加える文字列(0など)を作成
   for( var i=0 ; i < (setFigure - targetFigure)  ; i++ ) {
      addZeros += setChar;
   }
   // 文字列を合成して返す
   return (addZeros + targetNum);
}

やっていることは簡単で、

1. 対象文字列の桁数(文字数)を得る (lengthプロパティで)
2. もし、「対象文字列の桁数(targetFigure)」が「指定桁数(setFigure)」よりも少なければ、
   • 追加文字列の格納用変数(addZeros)に、指定文字(setChar)を、文字数の差の分だけ加える
3. 最後に、「追加文字列(addZeros)」を「対象文字列(targetNum)」の先頭に加えて返す。

という処理をしています。もし、「対象文字列の桁数」の方が「指定桁数」よりも既に多いのであれば、何も処理しません。(引数に与えられた対象文字列をそのまま返します。)

JavaScript関数2： 入力された内容を得て処理を実行する

HTMLで作成した各種入力欄から値を受け取って(先ほど作成した)addChars関数に渡したり、addChars関数からの戻り値を対象文字列の入力欄に書き戻したりしています。まあ、この関数は必ずしも必要ではありませんが。(^_^;)
ここでは、「指定が省略された場合」のために、デフォルトの値を指定もしています。
なお、受け取る引数は3つで、「対象文字列の入力欄に割り振ったid名」・「桁数の選択欄に割り振ったid名」・「埋める文字の入力欄に割り振ったid名」です。

// ▼入力された内容を得て処理を実行する
function prePadding( tNumId, tFigId, tCharId ) {
   // 各文字列を得る
   var targetNum = String( document.getElementById( tNumId ).value );
   var targetFig = Number( document.getElementById( tFigId ).value )  || 5;
   var targetChar= String( document.getElementById( tCharId ).value ) || 0;
   // 指定桁になるまで、先頭に指定文字を加える
   var retString = addChars( targetNum, targetFig, targetChar );
   // 変換結果を書き戻す
   document.getElementById( tNumId ).value = retString;
}

この関数でやっていることは、

1. 指定idの要素から対象文字列を得て、変数「targetNum」に(文字列として)格納。
2. 指定idの要素から桁数を得て、変数「targetFig」に(数値として)格納。もし何も指定されていなければ「5」が指定されたと解釈。
3. 指定idの要素から埋める文字を得て、変数「targetChar」に(文字列として)格納。もし何も指定されていなければ「0」が指定されたと解釈。
4. 上記の3変数を引数に指定して、関数addCharsを実行。戻り値を、変数「retString」に格納。
5. 変数「retString」の値を、対象文字列の入力欄に書き戻す。

という処理です。
なお、上記のソース中では、値を(強制的に)文字列にする「Stringメソッド」や、値を(強制的に)数値にする「Numberメソッド」を利用していますが、これらは書かなくてもうまく動きました。(^_^;) が、まあ、一応念のために書いておきました。
特に「桁数」の指定は絶対に数値である必要があるので。(そのために、桁数の入力は「input要素による自由入力」ではなく「select要素による選択」にしたのですが。)

というわけで、指定の桁数になるまで、文字列の先頭を「0」などの指定文字で埋める方法を紹介しました。

(更新日：2017年06月17日)