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"

関連記事

  • webpack-dev-serverでhttpsでのアクセスを可能にする方法

    webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。外部APIのテストや、メディアデバイスのテストなどで、開発中のlocalhostをhttpsにする必要があると...


  • ASP.NET UpdatePanelでPostBack時にフォーカス状態を保持する

    ASP.NETのUpdatePanelでPostBack時にコントロールのフォーカス状態を保持する方法を紹介します。UpdatePanelのポストバックの開始と終了のイベントを設定するで紹介した方法で...


  • stylelintで例外(無視)するタグを指定する

    cssで構文チェックを行うstylelintで任意のタグを無視してエラーとしない方法を紹介します。以下のようにruleのignoreTypesで無視するタグを指定します。以下の例ではamp htmlの...


  • JavaScript localStorageの基本的な使い方まとめ

    JavaScriptでデータをブラウザに簡単に保存する仕組みのlocalStorageの基本的な使い方を紹介します。keyは保存するときにキーとなる値です。取り出すときにこのキーを指定して取得します。...


  • JavaScript 文字列を連結する

    JavaScriptで文字列を連結します。JavaScriptでは文字列の連結は文字列同士を+で結合できます。例えば以下のように、数値同士を+演算子で計算すると足し算が行われてしまうので注意します。上...


  • JavaScript 0埋めをするテキストボックスを作成する

    テキストボックスで値を入力後、指定した文字数に0埋めする処理を実装します。以下のURLで紹介した処理を組み合わせれば簡単に実装できます。JavaScriptで指定した文字数に0埋めをするとJavaSc...


  • JavaScript ¥(円マーク)を文字列で扱う

    JavaScriptの¥(円マーク)は、正しく設定していないと利用者のPCのOSなどの環境によっては\(バックスラッシュ)で表示されてしまう可能性があるので、扱いには注意が必要です。JavaS...


  • JavaScript trimで前後の空白(スペース)を削除する

    JavaScriptで文字列の前後の空白(スペース)を削除します。trim関数を使えば先頭と末尾の半角スペース、全角スペースの両方が削除されます。IE8以下の場合はtrim関数が使えないので自作する必...


  • JavaScript 時刻の妥当性チェックをする

    時刻の妥当性チェックを行います。HH:mm書式で00:00〜23:59までの範囲が有効になるように正規表現でチェックをしています。


  • JavaScript システム日付を取得する

    JavaScriptでシステム日付を取得するには以下のように、Dateオブジェクトを宣言します。取得したDateオブジェクトから年〜ミリ秒までをそれぞれ取得できます。月だけは0から始まるので+1をする...