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

数値を文字列表示する時

整数とか番号を左から３桁まで０埋め
少数を少数点以下５桁まで０埋め

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

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

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

このページの目次

数値を左から０埋めするには
数値を右から０埋めするには
ここまでのまとめ

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

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

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

/** 文字列を０埋め */
str.padStart(length, '0');

1 2	/** 文字列を０埋め */ str.padStart(length, '0');

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

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

var num = 42;
console.log(num.toString().padStart(5, '0'));
  /// => 00042

var num = 42;

console.log(num.toString().padStart(5, '0'));

/// => 00042

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

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

var num = 42;
console.log(padStartWith0(num, 5));
  /// => 00042

/**
* 指定した長さで０埋めする関数
* @param {number} number ０埋めする数値
* @param {number} length ０埋めする長さ
**/
function padStartWith0(number, length){
  return number.toString().padStart(length, '0');
}

var num = 42;

console.log(padStartWith0(num, 5));

/// => 00042

/**

* 指定した長さで０埋めする関数

* @param {number} number ０埋めする数値

* @param {number} length ０埋めする長さ

**/

function padStartWith0(number, length){

return number.toString().padStart(length, '0');

}

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

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

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

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

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

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

var formatted = number.toFixed(n);

1	var formatted = number.toFixed(n);

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

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

var num = 1.73;
console.log(num.toFixed(5));
  /// => 1.73000

var num = 1.73;

console.log(num.toFixed(5));

/// => 1.73000

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

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

var num = 0.999e5;
console.log(num.toFixed(5));
  /// => 99900.00000

var num = 0.999e5;

console.log(num.toFixed(5));

/// => 99900.00000

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

ここまでのまとめ

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

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