Zenn
0️⃣

JavaScriptで0パディング（ゼロパディング）を行う方法

2025/01/09に公開
JavaScript
frontend
tech

0パディングとは

数値を文字として表現・表示する際に、指定された桁数に足りない分だけ左右に「0」を追加する処理のことです。
よく見る「01」とか「02」とかですね。
今回はこれのJavaScriptでの実装方法を2つご紹介したいと思います。

String.prototype.slice()

1つ目がString.prototype.slice()を使用する方法です。
先に足りない桁数を文字列連携してString.prototype.slice()で文字列の終わりから取得します。
String.prototype.slice()は負の数を指定すると末尾から数えた値を取得できるのでその挙動を利用します。

const num01 = 1
const zeroPadding = ('0' + num).slice(-2)

// 01
console.log(zeroPadding)

String.prototype.padStart()

2つ目がString.prototype.padStart()を使用する方法です。
String.prototype.padStart()では第一引数に桁数、第二引数に埋める文字を指定します。
また、String.prototype.padStart()は文字列でないと利用できないのでString()で文字列に置き換えてから利用します。


const num = 1
const zeroPadding = String(num).padStart(2, '0')

// 01
console.log(zeroPadding)

まとめ

どちらの方法でも0パッディングは実現できますが、String.prototype.padStart()の方がより直感的かと思います。
お好きな方をお使いください。
最後までお読みいただきありがとうございました。

参考

https://zenn.dev/communitio/articles/js-zero-padding
https://gray-code.com/javascript/fill-numbers-with-zeros/

Discussion