JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで数値の先頭をゼロで埋める（ゼロパディング）方法

ゼロパディングとは

数値の先頭にゼロを追加して桁数を揃えることを「ゼロパディング」と呼びます。例えば「2」を4桁で表すと「0002」になります。日付や時刻の表示、IDの整形など、見た目の桁数を揃えたい場面でよく使われるテクニックです。

ここでは、数値の長さをチェックし、指定した桁数に達するまで先頭にゼロを追加する関数を作成する方法を紹介します。以下のサンプルでは、String.prototypeに独自メソッドを追加して実装しています。

サンプルコード

次のコードを実行すると、JavaScriptで数値の先頭にゼロを埋めることができます。

<!DOCTYPE html>
<html>
   <body>
      <script>
         String.prototype.padFunction = function(padStr, len) {
            var str = this;
            while (str.length < len)
               str = padStr + str;
            return str;
         }
         var str = "2";
         document.write(str.padFunction("0", 4));

         var str = "8";
         document.write("<br>"+str.padFunction("0", 5));
      </script>
   </body>
</html>

実行結果

0002
00008

コードの解説

padFunctionは、第1引数に埋め込みたい文字（ここでは「0」）、第2引数に目標の桁数を受け取ります。whileループで文字列の長さが目標桁数に達するまで、先頭に指定文字を連結していきます。そのため「2」は4桁の「0002」に、「8」は5桁の「00008」に変換されます。

補足：padStart()メソッドを使う方法

ES2017（ES8）以降のモダンなJavaScriptでは、標準のpadStart()メソッドを使うことで、よりシンプルにゼロパディングが実現できます。

var num = "2";
console.log(num.padStart(4, "0")); // "0002"

var num2 = "8";
console.log(num2.padStart(5, "0")); // "00008"

独自関数を定義する必要がなく、コードも読みやすくなるため、対応ブラウザの範囲に問題がなければpadStart()の利用を推奨します。

  1. 【JavaScript】ゼロを含む文字列を数値に変換する方法をわかりやすく解説

    JavaScriptでは、ドット（.）やゼロを含む文字列を数値として扱いたい場面があります。例えば、次のような文字列があったとします。var stringValue="453.000.00.00.0000";このようにゼロや区切り文字を含む文字列をそのまま数値変換しようとすると、意図した結果になりません。そこで、replace()メソッドで不要なドットを取り除き、parseInt()で整数に変換するという2段階の処理を行います。var numberValue = parseInt(stringValue.replace(/\./gm, ''));コード全体の

  2. Excelで数値を先頭ゼロ付きのテキストに変換する9つの方法

    先頭ゼロ(先行ゼロ)は、主に数値の桁数を揃えるために使用されます。ID番号、郵便番号、セキュリティ番号などの記録を管理する場合には、セル内で先頭ゼロを保持しなければなりません。しかし、プエルトリコの郵便番号「00901」のようにゼロから始まる番号をセルに入力すると、Excelは即座に「901」と切り詰めてしまいます。Excelで先頭ゼロを正しく扱うには、数値をテキスト(文字列)として認識させることが重要です。この記事では、先頭ゼロを付けたまま数値をテキストに変換する9つの方法を詳しく解説します。 Excelで数値を先頭ゼロ付きテキストに変換する9つの方法 まずサンプルデータをご紹介し