JSで毎度sliceを使って0埋めを描くのも手間になるので、何かいい方法がないか探ってみた。
「JS 0埋め」でググると大抵出てくるの以下の例で考える
1桁や2桁の数字が出てくるとその前に0を入れて必ず3桁にしたいのような例を考える。
const num = 1;
const result = ("000" + String(num)).slice(-3);
console.log(result);
// 出力結果 001
es20117までであればこの書き方で良いのだが、es2017でpadStartというものが追加されている。
説明文はmdnのままであるが以下のようになっている。
padStart() メソッドは、結果の文字列が指定した長さになるように、現在の文字列を他の文字列で (必要に応じて繰り返して) 延長します。延長は、現在の文字列の先頭から適用されます。
padStartを使ってsliceで実装した上記の例を書き直す。
const num = 1;
const result = String(num).padStart(3, "0");
console.log(result);
// 出力結果 001
個人的にはpadStartの方が見やすいと思いました。
padStartの第一引数で文字列の長さを何文字にするかを決めて、渡された文字列(今回で言うとnum)が第一引数に指定された文字数に満たない場合、第二引数で指定された文字を先頭から詰めていくということになるので頭の整理がしやすかったということが理由です。(個人的にsliceで負の数を扱うことがあまり好きではなかったことも理由にあります)
今まで脳死でsliceを使って実装していましたがpadStartを使うようにしたいと思いました。
コメント
@a20129(編集済み)
0
slice
でのゼロパディングの場合、元の値で最低1桁分あるので、追加する0
は最終的に欲しい桁数 -1で いいですよ。上記の場合、
000
のうちの最初の0
は絶対に使われることがないので無駄になります。文字列と結合することで文字列型へのキャスティングも行なわれるので、
でこと足ります。
padStart
を使う場合は、文字列へのキャストはString
を使ってももちろん構わないのですが、個人的にはテンプレートリテラルを使ったほうがすっきりして好きです。