JavaScriptで数値を0埋めして表示する方法とコード例

数値を文字列表示する時

  • 整数とか番号を左から3桁まで0埋め
  • 少数を少数点以下5桁まで0埋め

みたいに0埋めゼロパディング)したいことは結構あると思います。

JavaScriptにもフォーマット関数的なのがあればいいんですが、残念ながらそういうパディング用の関数はありません。ですが他の関数を上手く使えば0埋めすることも可能です。

ここではそのJavaScriptで数値を0埋めする方法について紹介します。

数値を左から0埋めするには

まず整数などを 00013  とか 00173  みたいに左から0埋めする方法について

これにはpadStartメソッドという指定した長さに文字列を延長するメソッドを使うのが簡単です。例えばある文字列 str  を  '0'  という文字を使って n  桁に拡張したいなら次のように書けばOK

こうすれば文字列 str  の長さが length  に切り捨てられ、もし長さがそれより短い場合は左側から  '0'  で埋めることができるという訳です。

 

例えば次が padStart  を使って3ケタの数字を5ケタに0埋めしているコード例

こうすれば 42  が5ケタに延長されて 00042  みたいな形になります。

 

もし上のコードをいちいち書くのが面倒なら次のように関数化するのもアリですね。

まあ関数化するほど複雑な処理でもないですが数値を文字列に変換するよりも手間が少なくなります。

 

以上が数値を左から0埋めする方法

単に padStart  に延長する長さと '0'  を渡せばいいだけなので簡単です。

数値を右から0埋めするには

お次は少数などを 14.2500  とか 0.140000  みたいに右から0埋めする方法

これにはtoFixedメソッドという数値を固定小数点表記に変換するメソッドを使うのが簡単です。例えばある値 number  を小数点以下 n  ケタで固定したい場合は次のように書けばOK

返される文字列 formatted  は小数点以下が n  ケタで固定され、0埋めされます。

 

例えば次が toFixed  を使って小数を5ケタで0埋めしているコード例

この場合だと toFixed  には 5 を渡しているので小数点以下が5ケタになります。元の値は 1.73  で2桁までなのでそれ以降が0埋めされるといった感じです。

 

ちなみに 0.99e10  みたいに対数表示された小数の場合は全て展開された上で0埋めされるみたいです。(次コード参照)

上コードだと 99900.00000  のような文字列になります。 0.99900e5  みたいに指数表記された仮数部が0埋めされるわけではないことに要注意

ここまでのまとめ

もう一度数値の0埋めについてまとめると次の通り

  • 数値を左から0埋め
    左の場合はpadStartメソッドを使う。例えば num  という数値に対して n  桁で0埋めしたいなら num.toString().padStart(n, '0');  を実行すれば '00042'  みたいな文字列が取得可能
  • 数値を右から0埋め
    右の場合はtoFixedメソッドを使う。例えば num  という小数に対して n  桁で0埋めしたいなら num.toFixed(n);  を実行すれば '0.99000'  のような文字列が取得可能

フォーマット用の関数がないのは少し不便ですが、他のメソッドを上手く使えばゼロパディングもそれほど難しくはありません。

以上JavaScriptで数値を0埋めする方法についてでした。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください