JavaScriptでの0埋めの完全解説: 基本から応用まで
1. はじめに
数字や文字列を特定の桁数になるように0で埋める、これを「0埋め」と言います。
JavaScriptで0埋めを行う方法を初心者向けにわかりやすく解説していきます。
サルモリ
0埋めって何かと思ったら、数字の前を0で埋めることか！よく使うテクニックだね！
アロー関数を徹底的に学びたい人向けです！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
2. 基本的な0埋めの方法
JavaScriptで最も簡単に0埋めを行う方法は、String.prototype.padStart()を利用する方法です。
ソースコード例
|
1 2 3 |
let number = 5; let result = number.toString().padStart(3, '0'); console.log(result); |
出力結果
005 
サルモリ
3桁になるように前を0で埋めたら、005になったね！
3. 数値での0埋め
数値を直接0埋めする際のテクニックも紹介します。
一般的な方法は、以下のようにすることです。
ソースコード例
|
1 2 3 |
let num = 42; let formattedNum = ('000' + num).slice(-3); console.log(formattedNum); |
出力結果
042 
サルモリ
あ、これも便利だね。数値に直接0埋めできるから、いろんな場面で使えそう！
4. 0埋めの応用例
さて、上で紹介した基本的な0埋めの技術を利用して、応用例をいくつか見てみましょう。
例えば、日付や時刻を扱う際にも0埋めは役立ちます。
ソースコード例
|
1 2 3 4 |
let date = new Date(); let month = (date.getMonth() + 1).toString().padStart(2, '0'); let day = date.getDate().toString().padStart(2, '0'); console.log(`${month}/${day}`); |
出力結果
09/21 (※出力例) 
サルモリ
日付や時刻での0埋めは見やすくていいね！
5. まとめ
この記事では、JavaScriptでの0埋めについての基本から応用までを学びました。
正確な桁数を維持したい場面や、見た目を揃えたい場合など、様々な場面で0埋めは役立つテクニックです。
実際のコーディングの際にも、この知識を活かして効果的に利用してください。
サルモリ
最後まで読んでくれてありがとう！！
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！
サルモリ
最後まで読んでくれてありがとう！！
