JavaScriptで数値に先頭ゼロを追加する方法

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

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

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

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

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

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

方法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"

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

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

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

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

これらの方法の選択は、

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

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

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

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

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

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

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

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

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

どの方法を選ぶべきか？

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

選ぶ際のポイント

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

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

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