JavaScript
slice
es2017
padStart
padEnd
0
どのような問題がありますか?

投稿日

JSで0埋めをsliceを使わずに実装する

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を使うようにしたいと思いました。

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
ユーザー登録ログイン
ka25012
2021年4月1日よりプログラミング学習開始。 学んだことのアウトプット用に使っています。 2021年12月よりフロントエンドエンジニアとして勤務開始。 Nuxt.js、TypeScript使ってます

コメント

(編集済み)

sliceでのゼロパディングの場合、元の値で最低1桁分あるので、追加する0は最終的に欲しい桁数 -1で いいですよ。

const result = ("000" + String(num)).slice(-3);

上記の場合、000のうちの最初の0は絶対に使われることがないので無駄になります。
文字列と結合することで文字列型へのキャスティングも行なわれるので、

const result = ('00' + num).slice(-3);

でこと足ります。

padStartを使う場合は、文字列へのキャストはStringを使ってももちろん構わないのですが、個人的にはテンプレートリテラルを使ったほうがすっきりして好きです。

const result = `${num}`.padStart(3, '0');
0
どのような問題がありますか?
あなたもコメントしてみませんか :)
ユーザー登録
すでにアカウントを持っている方はログイン
0
どのような問題がありますか?
ユーザー登録して、Qiitaをもっと便利に使ってみませんか

この機能を利用するにはログインする必要があります。ログインするとさらに下記の機能が使えます。

  1. ユーザーやタグのフォロー機能であなたにマッチした記事をお届け
  2. ストック機能で便利な情報を後から効率的に読み返せる
ユーザー登録ログイン
ストックするカテゴリー