【コピペでOK】0埋め(0パディング)しよう!【JavaScript】

JavaScript

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験から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フォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました