JavaScriptの0埋めって？簡単なコードの書き方も解説！

2023年3月7日2023年11月4日

こんにちは！今回はJavaScriptにおける0埋めについて解説します。

JavaScriptで数値や文字列を扱う際に、必要な桁数を満たすために0埋めが必要になることがあります。

この記事では0埋めの方法やその応用例を紹介し、初心者の方でも理解しやすく解説していきます。

この記事は13分で読むことができます。

JavaScriptにおける0埋めとは？

JavaScriptにおける0埋めとは、桁数が足りない数値や文字列に対して、足りない桁数を0で埋めることを指します。

例えば、数値の「2」を「002」というように、文字列の左側に0を追加して桁数を揃えることができます。

0埋めは、日付や時刻など、桁数を合わせたいデータの表現に役立ちます。

0埋めの方法

0埋めをする方法には、主に以下の3つがあります。

String.prototype.padStart()

ES2017から追加されたString.prototype.padStart()メソッドは、指定された長さになるまで文字列を指定した文字で埋めます。以下に使用例を示します。

JavaScript

const number = 2;
const zeroPaddedNumber = String(number).padStart(3, '0');
console.log(zeroPaddedNumber); // 結果：'002'

このコードでは、数値の「2」を文字列に変換した後、padStart()メソッドを使って3桁の文字列に変換しています。

第1引数には桁数、第2引数には埋めたい文字(今回は0)を指定します。
今回の結果は002となります。

文字列連結とループ

文字列連結とループを組み合わせて0埋めを行うこともできます。以下は使用例です。

JavaScript

const number = 2;
const zeroPaddedNumber = '000'.slice(String(number).length) + number;
console.log(zeroPaddedNumber); // 結果：'002'

このコードでは、数値の「2」を文字列に変換した後、’000’を指定した長さでスライスします。
そして、スライスした結果の文字列と数値を連結して、3桁の文字列に変換しています。

文字列と数値を連結すると文字列になることは忘れてしまう人が多いので覚えておきましょう！

文字列と数値を連結すると文字列になる

正規表現

正規表現を使って、0埋めを行うこともできます。

JavaScript

const number = 2;
const zeroPaddedNumber = ('000' + number).slice(-3);
console.log(zeroPaddedNumber); // 結果：'002'

このコードでは、数値の「2」’000’と連結して3桁の文字列にし、slice()メソッドを使って末尾から3桁分だけ取り出します。

0埋めの応用例

0埋めはどんな時に利用することができるのでしょうか。

今回はそんな0埋めの応用例を2つ紹介します。

日付のフォーマット

1つ目の応用例は日付のフォーマットです。

例えば、日付を「YYYY-MM-DD」の形式で表示する場合、月と日が1桁の場合には0埋めが必要になります。

以下は、Dateオブジェクトから日付を取得して0埋めを行った後「YYYY-MM-DD」の形式で表示するコードです。

JavaScript

const date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // 結果：'2023-03-06'

このコードでは、Dateオブジェクトから年、月、日を取得して、それぞれを0埋めした後、テンプレートリテラルを使って「YYYY-MM-DD」の形式で文字列を結合しています。

テンプレート文字列を忘れてた人は復習しておきましょう！

時刻のフォーマット

時刻のフォーマットでも0埋めは役立ちます。

例えば、時刻を「HH:mm:ss」の形式で表示する場合、時、分、秒が1桁の場合には0埋めが必要になります。

日付のフォーマットと似ていますが、以下が時刻のフォーマットのサンプルコードです。

JavaScript

const date = new Date();
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
const formattedTime = `${hours}:${minutes}:${seconds}`;
console.log(formattedTime); // 結果：'10:23:45'