JavaScriptで数値に先頭ゼロを追加する方法：コード例解説

JavaScriptで数値を先頭ゼロで埋める

JavaScriptでは、数値を文字列に変換した後に、先頭ゼロを埋めることができます。これにより、特定のフォーマットや表示形式を実現することができます。

方法1: String.prototype.padStart()メソッドを使用する

このメソッドは、文字列の指定された長さに達するまで、指定した文字で先頭から埋めます。

const number = 123;
const paddedNumber = number.toString().padStart(5, '0'); // "00123"

• number.toString(): 数値を文字列に変換します。
• .padStart(5, '0'): 文字列を長さ5に達するまで、'0'で先頭から埋めます。

方法2: 文字列テンプレートを使用する

文字列テンプレート内で、数値の前に 0 を指定することで、先頭ゼロを埋めることができます。

const number = 123;
const paddedNumber = `000${number}`; // "000123"

• 000${number}: 文字列テンプレート内で、数値の前に 000 を指定しています。

具体的な例

// 2桁の年数を表示する
const year = 23;
const paddedYear = year.toString().padStart(2, '0'); // "23" (すでに2桁なので、変更なし)

// 3桁のシリアル番号を生成する
const serialNumber = 12;
const paddedSerialNumber = serialNumber.toString().padStart(3, '0'); // "012"

// 10桁の電話番号をフォーマットする
const phoneNumber = 1234567890;
const formattedPhoneNumber = `(${phoneNumber.toString().slice(0, 3)}) ${phoneNumber.toString().slice(3, 6)}-${phoneNumber.toString().slice(6)}`; // "(123) 456-7890"

JavaScriptで数値に先頭ゼロを追加する方法：コード例解説

padStart()メソッドを用いた方法

const number = 123;
const paddedNumber = number.toString().padStart(5, '0'); // "00123"

• .padStart(5, '0'):
  • 5: 文字列の最終的な長さを指定します。
  • '0': 文字列の長さが足りない部分に埋め込む文字を指定します。この場合、'0'なので、先頭が'0'で埋められます。
  • このメソッドは、元の文字列を書き換えるのではなく、新しい文字列を返します。

例: 3桁のシリアル番号を作成する場合

const serialNumber = 12;
const paddedSerialNumber = serialNumber.toString().padStart(3, '0'); // "012"

文字列テンプレートを用いた方法

const number = 123;
const paddedNumber = `000${number}`; // "000123"

• ${number}: 文字列テンプレート内で、変数の値を埋め込むことができます。
• 000: 数値の前に必要な数の'0'を記述します。

例: 年号を2桁で表示する場合

const year = 23;
const paddedYear = `00${year}`; // "0023"

• slice()メソッドを用いた方法: 数値の前に十分な数の'0'を追加し、その後、必要な桁数だけ切り出す方法です。
• whileループを用いた方法: 桁数を一つずつ確認し、足りない部分に'0'を追加する方法です。

これらの方法の選択は、

• 必要な桁数
• コードの可読性
• 他のコードとの組み合わせやすさ
• JavaScriptのバージョン などによって変わってきます。

padStart()メソッドは、シンプルかつ直感的に数値に先頭ゼロを追加できるため、多くの場合に推奨されます。文字列テンプレートは、より柔軟な表現が可能ですが、padStart()ほど簡潔ではありません。

どちらの方法を選ぶにしても、

• どのようなフォーマットで数値を表示したいか
• どのような状況でコードを使用するか
• JavaScriptのバージョン などを考慮して、適切な方法を選択してください。

slice()メソッドを用いた方法

const number = 123;
const paddedNumber = ('000' + number).slice(-3); // "012"

• '000' + number: 数値の前に十分な数の'0'を追加します。
• .slice(-3): 後ろから3文字を取り出すことで、不要な'0'を削除します。

特徴:

• シンプルで短く記述できる。
• 必要な桁数が固定されている場合に適している。

whileループを用いた方法

const number = 123;
const digits = 5; // 5桁にしたい場合
let paddedNumber = number.toString();
while (paddedNumber.length < digits) {
    paddedNumber = '0' + paddedNumber;
}

• whileループ: 文字列の長さが指定した桁数になるまで、先頭に'0'を付け加えます。

• 桁数を動的に変更できる。
• 複雑なロジックが必要な場合に適している。

配列とjoin()メソッドを用いた方法

const number = 123;
const digits = 5;
const paddedNumber = Array(digits - number.toString().length + 1).join('0') + number;

• Array(digits - number.toString().length + 1).join('0'): 必要な数の'0'を連結した文字列を作成します。
• + number: 作成した文字列と元の数値を連結します。

• 桁数の計算が少し複雑。
• 特殊な状況で有用な場合がある。

どの方法を選ぶべきか？

• padStart(): 簡潔で直感的、最も一般的な方法。
• slice(): 桁数が固定されている場合に適している。
• whileループ: 桁数を動的に変更したい場合や、複雑なロジックが必要な場合に適している。
• 配列とjoin()メソッド: 特殊な状況で有用な場合があるが、一般的には他の方法の方が簡潔。

選ぶ際のポイント:

• コードの可読性: 他のプログラマーが理解しやすいコードを選ぶ。
• パフォーマンス: 特に大きな数値を扱う場合、パフォーマンスが気になる場合は、ベンチマークテストを行う。
• JavaScriptのバージョン: 古いバージョンのJavaScriptでは、padStart()メソッドが使えない場合がある。

JavaScriptで数値に先頭ゼロを追加する方法には、様々なものがあります。それぞれの方法の特徴を理解し、状況に合わせて適切な方法を選択しましょう。

• 上記のコード例は、数値を文字列に変換して処理していますが、数値のまま操作したい場合は、数値の桁数を数えて、必要な数の0を掛け合わせるなどの方法も考えられます。
• より高度な処理が必要な場合は、ライブラリを利用することも検討できます。