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

はじめに

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埋めを行う際には、いくつかの注意点があります。

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