【JavaScript】数値のゼロ埋めや文字列の桁数合わせを一発で実現する padStart() と padEnd() メソッド

月や日のように 1 桁の場合は先頭を 0 で埋めて “01” に変換したり、文字列の前か後ろにスペースを入れて表示桁数を合わせたいことは良くあります。今回は、こういったパディング操作を一発で叶えてくれる padStart() と padEnd() メソッドを解説します。

数値のゼロ埋め

数値を特定の桁数に合わせるよう先頭を 0 で埋めるために良く使われてきたのが slice() メソッドを使う方法でした。これは長い間 JavaScript の世界ではイデオムとして使われてきたのではないでしょうか。

const month = 4;
const day = 8;

const date = [
  ('0' + month).slice(-2),
  ('0' + day).slice(-2)
].join('/');
console.log(date); // "04/08"

もともと slice() メソッドは文字列の一部分を抜き出すものであり、ゼロ埋めする目的で用意されたメソッドではありません。そのため、JavaScript に慣れていない人がこういったコードを見ると、最初は何をしているのかが分かりづらいかもしれません。

現在では数値のゼロ埋めに slice() を使う必要はありません。新たに padStart() メソッドが用意され、すべてのメジャーブラウザーで利用可能です。

const month = 4;
const day = 8;

const date = [
  month.toString().padStart(2, '0'),
  day.toString().padStart(2, '0')
].join('/');
console.log(date); // "04/08"

少しコードが長くなりましたね。しかし、何をやっているのか分かりやすくなったのではないでしょうか？

変数 month と day は Number 型です。それを toString() メソッドで String 型に変換してから padStart() メソッドを呼び出します。padStart() メソッドは String オブジェクトのメソッドです。そのため、もし元の値が数値なのであれば、事前に toString() メソッドを呼び出して String 型に変換しておく必要があります。

個人的は、前述の slice() メソッドを使った例のように暗黙の型変換を使うより、こちらのほうが分かりやすいコードになったと感じます。

padStart() メソッドの文法

padStart() メソッドは、第 1 引数には桁数を指定し、第 2 引数には埋め合わせに使う文字を指定します。第 2 引数の文字は文字列の先頭から埋め合わせられます。

次の例は、配列で表現されたテーブルの数値を整形してテキストとして出力します。

const tbl = [
  [23, 129],
  [2046, 3],
  [1, 1025]
];

let output = '';

for (let row of tbl) {
  for (let col of row) {
    output += col.toString().padStart(8, ' ');
  }
  output += '\n';
}

console.log(output);

このコードの出力結果は次の通りです。

      23     129
    2046       3
       1    1025

padStart() メソッドの第 2 引数は省略が可能です。その場合、第 2 引数に半角スペースが指定されたものとして処理されます。前述のコードであれば、次のように置き換えても同じ結果になります。

output += col.toString().padStart(8);

後ろを埋め合わせる padEnd() メソッド

前述の padStart() メソッドは文字列の前を埋め合わせましたが、文字列の後ろを埋め合わせるには padEnd() メソッドを使います。引数は padStart() メソッドと同じです。

次の例は前述のテーブル整形出力のサンプルに少し手を入れたものです。

const tbl = [
  ['Taro', 129],
  ['Kenichiro', 3],
  ['Hanako', 1025]
];

let output = '';

for (let row of tbl) {
  output += row[0].padEnd(12);
  output += row[1].toString().padStart(8);
  output += '\n';
}

console.log(output);

このコードの出力結果は次の通りです。

Taro             129
Kenichiro          3
Hanako          1025

サポートしているブラウザ

padStart() と padEnd() メソッドは Internet Explorer を除くすべてのメジャーブラウザーがサポートしています。

まとめ

古くから JavaScript を使っていると、意外に新しいメソッドを知らなかったりします。お恥ずかしながら筆者も padStart() と padEnd() の存在を知ったのは最近のことでした。それまでは slice() メソッドを使い続けており、それで特に困っていなかったのも、無知の原因の一つだったのかもしれません。

ちなみに、Perl や PHP では、ゼロ埋めには書式指定できる出力関数が良く使われます。もともとは C 言語の sprintf() 関数を引き継いだものです。

# Perl の場合
my $num = 123;
my $formatted_num = sprintf("%06d", $num);
print $formatted_num; # "000123"

Python にも良く似た書式指定できる出力関数が用意されています。

# Python3 の場合
num = 123
formatted_num = '{:06}'.format(num)
print(formatted_num) # "000123"

個人的には、このような書式指定可能な出力関数が JavaScript にもあると便利と思いました。

今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。