JavaScriptで簡単0埋め!5つの方法とサンプルコード

JavaScriptで簡単に0埋めを実現する方法を解説する記事のサムネイルJS
この記事は約7分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

JavaScriptで0埋めをする方法について詳しく知りたいけれど、どの方法がいいのか分からないと感じている方も多いことでしょう。

この記事では、JavaScriptで0埋めを実現する5つの方法を紹介し、それぞれのサンプルコードを含めて詳しく解説していきます。

この記事を読めば、JavaScriptで0埋めをする方法を習得できるようになります。

また、応用例や注意点、カスタマイズ方法も紹介しているので、ぜひ参考にしてください。

●JavaScriptで0埋めを実現する5つの方法

JavaScriptで0埋めを行う方法はいくつかありますが、ここでは代表的な5つの方法を紹介します。

○方法1:String.prototype.padStart()

padStart()メソッドは、文字列の先頭に指定した文字を繰り返し追加し、指定した長さになるまでパディングします。

このメソッドを利用すれば、簡単に0埋めができます。

○方法2:String.prototype.padEnd()

padEnd()メソッドは、文字列の末尾に指定した文字を繰り返し追加し、指定した長さになるまでパディングします。

こちらもpadStart()と同様に、0埋めが簡単にできます。

○方法3:自作関数を利用する

0埋めを行うための自作関数を作成し、それを利用して0埋めを実現する方法です。

○方法4:演算子を利用する

JavaScriptの演算子を利用して、簡単に0埋めを行う方法です。

○方法5:正規表現を利用する

正規表現を利用して、0埋めを実現する方法です。

●各方法のサンプルコード

それぞれの方法について、サンプルコードを紹介していきます。

○サンプルコード1:padStart()を使った0埋め

このコードではpadStart()メソッドを使って、文字列の先頭に0を追加して0埋めを行っています。

const num = 42;
const zeroPadded = num.toString().padStart(5, '0');
console.log(zeroPadded); // "00042"

○サンプルコード2:padEnd()を使った0埋め

このコードではpadEnd()メソッドを使って、文字列の末尾に0を追加して0埋めを行っています。

const num = 42;
const zeroPadded = num.toString().padEnd(5, '0');
console.log(zeroPadded); // "42000"

○サンプルコード3:自作関数を使った0埋め

このコードでは、0埋めを行う自作関数zeroPaddingを定義し、その関数を使って0埋めを実現しています。

function zeroPadding(num, length) {
  const str = num.toString();
  const padding = '0'.repeat(Math.max(0, length - str.length));
  return padding + str;
}

const num = 42;
const zeroPadded = zeroPadding(num, 5);
console.log(zeroPadded); // "00042"

○サンプルコード4:演算子を使った0埋め

このコードでは、JavaScriptの演算子を利用して、簡単に0埋めを行っています。

const num = 42;
const zeroPadded = ('00000' + num).slice(-5);
console.log(zeroPadded); // "00042"

○サンプルコード5:正規表現を使った0埋め

このコードでは、正規表現を利用して、0埋めを実現しています。

const num = 42;
const zeroPadded = num.toString().replace(/^(?=\d)/, '0'.repeat(5 - num.toString().length));
console.log(zeroPadded); // "00042"

●応用例とサンプルコード

0埋めは、さまざまな場面で役立ちます。

ここでは、いくつかの応用例とそれに対応するサンプルコードを紹介します。

○応用例1:カウントダウンタイマー

この例では、カウントダウンタイマーの表示を0埋めで整形しています。

function formatTime(time) {
  const minutes = Math.floor(time / 60);
  const seconds = time % 60;
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

const remainingTime = 90;
console.log(formatTime(remainingTime)); // "01:30"

○応用例2:日付や時刻の表示

この例では、日付や時刻を整形し、0埋めで見やすい表示にしています。

const date = new Date();
const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
console.log(formattedDate);

このコードでは、Dateオブジェクトを使って日付や時刻の情報を取得し、padStart()メソッドを使って月、日、時、分、秒をそれぞれ2桁の0埋めに整形しています。

○応用例3:金額表示

この例では、金額を3桁ごとにカンマ区切りで表示し、見やすい形に整形しています。

function formatCurrency(amount) {
  const reversedAmount = amount.toString().split('').reverse().join('');
  const formattedAmount = reversedAmount.replace(/(\d{3})(?=\d)/g, '$1,').split('').reverse().join('');
  return formattedAmount;
}

const price = 123456;
console.log(formatCurrency(price)); // "123,456"

このコードでは、まず金額を文字列に変換し、逆順に並べ替えます。

次に、正規表現を使って3桁ごとにカンマを挿入し、最後に文字列を再び逆順に戻して整形された金額表示を作成しています。

●注意点と対処法

0埋めを行う際には、いくつかの注意点があります。

  1. 文字列に対してのみpadStart()padEnd()が使用できるため、数値に対してはtoString()メソッドを使って文字列に変換する必要があります。
  2. padStart()padEnd()はECMAScript2017で追加されたため、それ以前のバージョンのJavaScriptでは利用できません。
    対応していない環境で0埋めを実現したい場合は、自作関数や演算子を使った方法を利用してください。

●カスタマイズ方法

0埋めを行う方法は、さまざまなカスタマイズが可能です。

例えば、0以外の文字で埋めたい場合は、padStart()padEnd()の第2引数に任意の文字を指定することができます。

また、自作関数を使う場合は、関数の引数や処理内容を変更することで、独自の0埋めロジックを実現できます。

まとめ

この記事では、JavaScriptで0埋めを実現する5つの方法とその応用例を紹介しました。

それぞれの方法には特徴があり、状況に応じて適切なものを選択することが重要です。

また、カスタマイズを行うことで、さまざまな0埋めの要件に対応できます。