zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript 指定した文字数に0埋めをする

JavaScriptで他の言語でいうところのpadLeftのように、指定した文字数に0埋め(0ではなく任意の文字でも可能)する方法を紹介します。

シンプルな例

padLeftのようにファンクション化せずに使用するだけでよいのなら以下のようにシンプルに実装できます。

var foo = '123';
var bar = '4';
console.log(('000' + foo).slice(-3)); // "123"
console.log(('000' + bar).slice(-3)); // "004"

解説

slice関数は、指定した文字数を切り出します。例えばfoo = 'abc'.slice(2)とすると先頭(左)から2文字を切り出すのでfoo'ab'となります。

引数をマイナスにすると末尾(右)から切り出します。例えばfoo = 'abc'.slice(-2)とすると先頭(左)から2文字を切り出すのでfoo'bc'となります。

最終的な文字列の文字数(xとする)の数だけ0を先頭に追加しておき、末尾からx文字切りだせば、対象の文字列がx未満の場合は追加した0が付与されることになります。

注意点として、0埋めされる文字列が指定した文字数よりも多かった場合は指定した文字数にカットされてしまいます。後述の汎用ファンクションでこの対策をします。

汎用化

0埋め処理を多用する場合は以下のようにファンクション化します。

0埋めされる文字列が指定した文字数よりも多かった場合は指定した文字数にカットされてしまいます。

もし文字列をそのままにしたい場合は1行目のコメントアウトされている部分の処理を追加してください。

// char: 埋める文字(0埋めの場合は0) length: 文字列の長さ
String.prototype.padLeft = function (char, length) {
  // if (this.length > length) return this; // 必要なら追加
  var left = '';
  for (;left.length < length; left += char);
  return (left+this.toString()).slice(-length);
}

var foo = '123';
var bar = '4';
console.log(foo.padLeft('0', 3)); // "123"
console.log(bar.padLeft('0', 3)); // "004"

関連記事