【JavaScript】padStart・padEnd の使い方｜文字列を0埋め・桁そろえする方法

「時刻を 09:05 のように2桁でそろえたい」「金額の桁をそろえて表示したい」——そんなとき役立つのが、文字列を指定した長さまで埋めてくれる padStart と padEnd です。for 文で桁数を数えて手前に 0 を足す、といった処理を1行で書けます。この記事では、この2つのメソッドの基本の使い方から、0埋め（ゼロパディング）の実例、つまずきやすい注意点までを、動くデモ付きで解説します。

padStart・padEnd とは

padStart と padEnd は、文字列が指定した長さに満たないとき、足りないぶんを別の文字で埋めて長さをそろえる文字列メソッドです。padStart は先頭側（左）を、padEnd は末尾側（右）を埋めます。どちらも元の文字列は変更せず、埋めたあとの新しい文字列を返します。

// 先頭を "0" で埋めて5文字にする
"42".padStart(5, "0");   // "00042"

// 末尾を "-" で埋めて5文字にする
"42".padEnd(5, "-");     // "42---"

基本の使い方と引数

どちらのメソッドも引数は2つで、書き方は共通です。第1引数にそろえたい長さ、第2引数に埋める文字を渡します。

文字列.padStart(目標の長さ, 埋める文字);
文字列.padEnd(目標の長さ, 埋める文字);

第2引数を省略するとスペースで埋められます。また、埋める文字は1文字でなくてもよく、複数文字を渡すと繰り返して使われ、目標の長さを超えるぶんは途中で切られます。

// 第2引数を省略するとスペースで埋める
"7".padStart(3);          // "  7"

// 複数文字を渡すと繰り返して使う（長さ超過分は切られる）
"1".padStart(5, "ab");    // "abab1"

0埋め（ゼロパディング）で桁をそろえる

padStart の一番よく使う場面が、数字の先頭を 0 で埋めて桁数をそろえる「ゼロパディング」です。時刻や日付、連番のIDなどでよく使います。たとえば時・分・秒を必ず2桁で表示したいときは、次のように書けます。

const now = new Date();

// getHours() は 1 桁のとき 9 のように返るので、
// 文字列にしてから padStart で 2 桁にそろえる
const h = String(now.getHours()).padStart(2, "0");
const m = String(now.getMinutes()).padStart(2, "0");
const s = String(now.getSeconds()).padStart(2, "0");

console.log(`${h}:${m}:${s}`); // 例: "09:05:07"

下のデモは、この考え方で作ったデジタル時計です。1秒ごとに時刻を更新し、padStart(2, "0") で必ず2桁にそろえています。JavaScript タブのコードを見て、実際に時刻が2桁で表示される様子を確認してみてください。

<div class="clock" id="clock">--:--:--</div>

.clock {
  font-family: monospace;
  font-size: 44px;
  letter-spacing: 2px;
  text-align: center;
  padding: 24px;
  margin: 16px;
  background: #111827;
  color: #34d399;
  border-radius: 10px;
}

const clock = document.getElementById('clock');

function tick() {
  const now = new Date();
  // getHours() などは 1 桁のとき "9" のように返るので、
  // padStart で先頭を "0" で埋めて必ず 2 桁にそろえる
  const h = String(now.getHours()).padStart(2, '0');
  const m = String(now.getMinutes()).padStart(2, '0');
  const s = String(now.getSeconds()).padStart(2, '0');
  clock.textContent = `${h}:${m}:${s}`;
}

tick();
setInterval(tick, 1000);

padEnd で右側をそろえる

padEnd は末尾を埋めるので、ラベルの右側をそろえて見やすく並べたいときなどに使います。等幅フォントで表示するログや一覧で、項目名の幅をそろえると読みやすくなります。

const rows = [
  ["Name", "Webool"],
  ["Category", "CSS"],
];

for (const [label, value] of rows) {
  // ラベルを10文字分の幅にそろえてから値を続ける
  console.log(label.padEnd(10, " ") + value);
}
// "Name      Webool"
// "Category  CSS"

使うときに気をつけたいこと

数値には直接使えない

padStart と padEnd は文字列メソッドなので、数値（number）にはそのまま使えません。(5).padStart はエラーになります。数値を0埋めしたいときは、前の例のように String(数値) や 数値 + "" で文字列に変換してから呼び出します。

const n = 5;

// n.padStart(3, "0") はエラー（n は数値）
String(n).padStart(3, "0"); // "005"

すでに長い文字列は切り詰められない

第1引数の長さが、元の文字列の長さ以下のときは、何も足されず元の文字列がそのまま返ります。padStart は「足りないぶんを埋める」だけで、長すぎる文字列を短く切る機能はありません。桁あふれを想定する場合は、切り詰め（slice など）は別途行う必要があります。

// 目標の長さ（3）より元が長いのでそのまま
"12345".padStart(3, "0"); // "12345"

まとめ

padStart は先頭側、padEnd は末尾側を、指定した長さになるまで埋める文字列メソッドです。第1引数にそろえたい長さ、第2引数に埋める文字を渡し、第2引数を省略するとスペースで埋めます。時刻や連番の0埋めには padStart(2, "0") のような書き方が定番です。数値には使えないので String() で文字列にしてから呼ぶこと、元より短い長さを指定しても切り詰められないことをおさえておけば、桁そろえの処理をすっきり書けます。

参考ページ

• String.prototype.padStart() – JavaScript | MDN
• String.prototype.padEnd() – JavaScript | MDN