Jquery 数字の左側に０（ゼロ）をセットしてみた

2022年12月20日

数字の左側にゼロをセットしたいケースはしばしばあります。
例えば「日付」などです。

2022/12/1 と表現することもあれば、2022/12/01と表現することもあります。
ホームページの場合は、桁ずれを防ぐために日付の桁数を区切り文字を入れて10桁で統一するケースが多いです。

そんな場合、数字の左側をゼロで埋める必要があります。
PHPの場合、date()関数やstr_pad()関数等で容易に対応できます。

今回この作業をJqueryで行う必要がありました。
PHPならば容易にできることですが、Jqueryだとどうやって、左側にゼロをうめればよいのか？
いつものごとく調べてやってみました。

今回やりたいこと

入力した数字の左側にJqueryでゼロをセットします。

実際にできたものがこちら

実際にできたものがこちらです。

入力欄に数字を入れると下にゼロ付きの数字が表示されます。

結論から言うと、Jqueryで数字の左にゼロをセットできました。

疑問：仕組みはどうやっているの？

色々調べると、JqueryにはPHPのstr_pad()に該当する関数はありませんでした。
なので、工夫して実現する必要がありました。

そのやり方について説明します。

.slice()を使用して実現します

HTMLのソース

やっていることは、入力された値の左にゼロをセットするです。
ただ、str_pad()のような関数がないため、.slice()を使用して取り出ししています。

具体的には以下の1文で実現しています。

パット見、4桁指定だから、slice()に-4を指定しているように見えます。
あながち間違いではありません。

でもここで疑問がわきました。

疑問：slice()ってそもそも何をする関数なの？

調べてみたところ、次のように書かれていました。

sliceについての解説

指定した位置以降の範囲を取得する。
例えば、liタグ4つあるとして後ろの2つを選択する場合などに使用します。

つまり、グループの範囲指定をする関数です。

では、範囲選択でどうやってゼロを埋めているのでしょうか?

その仕組みについて解説します。

slice()で数字の左にゼロをセットする原理

今回のサンプルは、取得した数字にゼロを足しています。

これが何を意味しているのか最初よくわからなかったのですが、意味が理解できると原理がわかりました。

“0000”を加算する意味

これは、javascriptの特性ですが、文字と文字を結合する場合は「＋」を使います。
足し算をしているわけではなく、文字結合をしているのです。

その結果この例だと7桁の数字文字列が出来上がります。

slice(-4)を指定することで4桁を抽出

.slice()にマイナス値を指定すると、「後ろから何番目」という意味になります。

今回の例だと、後ろから4番目以降を抽出となるため、結果「0123」が取得できるのです。
“0000”4桁を結合しているのは、最大4桁のためです。

確かにこれならば、左にゼロがセットされた状態で文字列を取り出せます。
なんとも賢い方法です。

最初は見よう見まねで実現できることを確認しましたが、理屈を調べてみるとより深く理解できました。

手法を知っていれば、次回も何とかなりますが、理屈を知っていれば応用をきかせることができます。
興味深く調べることはとても良いことなのです。

注意点：桁数は事前に決めておく必要があります

今回気の付いた点があります。
それは、桁数を事前に決めておかなければいけないということです。
今回の例では5桁以上には左側にゼロが付きません。

5桁で左側にゼロをつけるには、”00000″を結合し、sliceに-5を指定する必要があるからです。

無論、入力数字の桁数がわかれば、流動的に対応することも可能です。
しかしながら、数字の左側にゼロを付けるケースは、あらかじめ桁数が決まっている場合が多いです。

例えば管理コード番号などです。
左側にゼロをつける処理は、桁数を決めておくことも肝要です。

本記事がまたお役に立てば幸いです。