数値を文字列表示する時
- 整数とか番号を左から3桁まで0埋め
- 少数を少数点以下5桁まで0埋め
みたいに0埋め(ゼロパディング)したいことは結構あると思います。
JavaScriptにもフォーマット関数的なのがあればいいんですが、残念ながらそういうパディング用の関数はありません。ですが他の関数を上手く使えば0埋めすることも可能です。
ここではそのJavaScriptで数値を0埋めする方法について紹介します。
数値を左から0埋めするには
まず整数などを 00013 とか 00173 みたいに左から0埋めする方法について
これにはpadStartメソッドという指定した長さに文字列を延長するメソッドを使うのが簡単です。例えばある文字列 str を '0' という文字を使って n 桁に拡張したいなら次のように書けばOK
1 2 |
/** 文字列を0埋め */ str.padStart(length, '0'); |
こうすれば文字列 str の長さが length に切り捨てられ、もし長さがそれより短い場合は左側から '0' で埋めることができるという訳です。
例えば次が padStart を使って3ケタの数字を5ケタに0埋めしているコード例
1 2 3 |
var num = 42; console.log(num.toString().padStart(5, '0')); /// => 00042 |
こうすれば 42 が5ケタに延長されて 00042 みたいな形になります。
もし上のコードをいちいち書くのが面倒なら次のように関数化するのもアリですね。
1 2 3 4 5 6 7 8 9 10 11 12 |
var num = 42; console.log(padStartWith0(num, 5)); /// => 00042 /** * 指定した長さで0埋めする関数 * @param {number} number 0埋めする数値 * @param {number} length 0埋めする長さ **/ function padStartWith0(number, length){ return number.toString().padStart(length, '0'); } |
まあ関数化するほど複雑な処理でもないですが数値を文字列に変換するよりも手間が少なくなります。
以上が数値を左から0埋めする方法
単に padStart に延長する長さと '0' を渡せばいいだけなので簡単です。
数値を右から0埋めするには
お次は少数などを 14.2500 とか 0.140000 みたいに右から0埋めする方法
これにはtoFixedメソッドという数値を固定小数点表記に変換するメソッドを使うのが簡単です。例えばある値 number を小数点以下 n ケタで固定したい場合は次のように書けばOK
1 |
var formatted = number.toFixed(n); |
返される文字列 formatted は小数点以下が n ケタで固定され、0埋めされます。
例えば次が toFixed を使って小数を5ケタで0埋めしているコード例
1 2 3 |
var num = 1.73; console.log(num.toFixed(5)); /// => 1.73000 |
この場合だと toFixed には 5 を渡しているので小数点以下が5ケタになります。元の値は 1.73 で2桁までなのでそれ以降が0埋めされるといった感じです。
ちなみに 0.99e10 みたいに対数表示された小数の場合は全て展開された上で0埋めされるみたいです。(次コード参照)
1 2 3 |
var num = 0.999e5; console.log(num.toFixed(5)); /// => 99900.00000 |
上コードだと 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埋めする方法についてでした。