みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!
JavaScriptの解説シリーズです。
今回は0埋めの方法について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- 0埋めが出来るようになる
桁数をあわせる際によく使うよ!
0埋めの関数を作ろう!
そもそも0埋め(ゼロパディング)とは?
一言でいうと、足りない桁数分を0で埋めることです。
例えば、3桁で表示したい場合に
1 → 001
というように桁を揃えることです。
0埋めの処理をつくってみよう!
やること
- 数値を用意する
- 数値の前に桁数分の0をつける※この際文字列型に変わる
- slice関数を用いて文字列の末尾から桁数分のテキストを切り取る
処理を作ろう!
// 数値を用意
const number = 99;
// 数値の前に桁数分の0をつける
const zeroPaddingNumber = "000" + number;
console.log(zeroPaddingNumber);
// 【出力結果】00099
// slice関数を用いて文字列の末尾から3桁分のテキストを切り取る
const slicedNumber = zeroPaddingNumber.slice(-3);
console.log(slicedNumber);
// 【出力結果】099
このように、99 → 00099 → 099
という順で0埋めすることが出来ました。
slice関数はマイナス – をつけると末尾から指定の文字数を切り取るよ!
右側を0埋めしたい
1 → 1.00のように、固定小数点形式にしたい場合は
toFixedという関数を使いましょう。
数値.toFixed(桁数);
【JavaScript】固定小数点形式に変換しよう!【toFixed】
コピペでOK!0埋め処理を関数化しよう!
コピペで使えるように凡例化しておきました!
ぜひカスタマイズして使ってください
/**
* 指定した桁数に0埋めする関数
* @param {int} num 対象の数値
* @param {int} zeroLength 埋めたい0の数
* @return {String} 0埋めされた文字列
*/
const zeroPadding = (num, zeroLength) => {
// "0"を入れるための変数
let zero = "";
// zeroLength個の"0"をつける
for (let i = 0; i < zeroLength; i++) {
zero += "0";
}
// numの前に指定した数の"0"をつけ、末尾の文字数を削る
return (zero + num).slice(-zeroLength);
};
// "1"を3桁表示に変換する
const number = zeroPadding(1, 3);
console.log(number);
// 【出力結果】 001
0埋めが理解できて偉い!
まとめ
- 0埋めとは、足りない桁数分を0で埋めること
- 0埋めの流れ、数値の前に桁数分の0をつける→文字列の末尾から桁数分のテキストをsliceする
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈