JavaScriptで数字を扱う時に、頭に0(ゼロ)を付けたいという場合があります。
例えば時刻を表すときに「9時ちょうど」を「09:00」と表現したいときはどうすれば良いか分かりますか？
今回はプログラミングあるあるの「数字の桁数を揃える」ことをやってみます。
動画もあるのでお好みでどうぞ。
JavaScriptで数字の頭に0(ゼロ)を足す方法
例題として時間の表示を使ってみます。
let now = new Date("March 13, 2023 04:02:03");
console.log(now.getHours()); // 「4」と出力される
console.log(now.getMinutes()); // 「2」と出力される
console.log(now.getSeconds()); // 「3」と出力される上記で取得したのは「4時2分3秒」なんですが、デジタル表示する場合には「04」など先頭に0を足すことで2桁表示とレイアウトを揃えたい所です。
JavaScriptでは今回のような状況に対してpadStart( )というメソッドを使うことで解決することができます。
実際の使い方はこんな感じです。
let now = new Date("March 13, 2023 04:02:03");
// ここから変更
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
hours = String(hours).padStart(2, "0");
minutes = String(minutes).padStart(2, "0");
seconds = String(seconds).padStart(2, "0");
console.log(hours); // 「04」と出力される
console.log(minutes); // 「02」と出力される
console.log(seconds); // 「03」と出力されるpadStart( )は引数を２つ取って、第一引数には「桁数」を第二引数には「先頭に追加する文字」を指定します。
今回はpadStart( 2, “0” )としたことで「2桁で表示して、足りない場合は先頭に0を足して2桁にする」という意味になります。
よく使うのは日付、時間ですがidのような識別番号にも使用することがあります。
あらかじめ上限の桁数が決まっていて連番を振ってユーザーを見分けたい場面です。
let id1 = "123456";
let id2 = "2188";
let id3 = "37";
id1 = id1.padStart(6, "0");
id2 = id2.padStart(6, "0");
id3 = id3.padStart(6, "0");
console.log(id1); // 「123456」と出力される
console.log(id2); // 「002188」と出力される
console.log(id3); // 「000037」と出力される初学者向けの学習教材やスクールでは習わないことが多いのですが、実務ではよく使うメソッドなのでぜひ覚えておきましょう。