Help us understand the problem. What is going on with this article?

数字の頭に0を加えて桁揃えする4つのやり方

More than 1 year has passed since last update.

「007」のようにひと桁の数字でも、頭に0を加えて3桁といった具合に桁揃えしたい場合があります。新旧の構文で4つほどのやり方を試してみました。なお、桁数は任意とします。

forループで0を加える

もっとも標準的なのは、for文で必要な数の0を加えることでしょう。関数で定めることにします。引数は数字と揃える桁数です。数字をその桁数の文字列にして返します。

もとの数字の桁数が引数に受け取った桁数以上のときは、文字列にした数字をそのまま返します。桁数に足りない文の0を、forループで数字の頭に加えるわけです。

function setDigits(number, digits) {
    let number_string = String(number);
    digits -= number_string.length;
    if (digits > 0) {
        for (let i = 0; i < digits; i++) {
            number_string = '0' + number_string;
        }
    }
    return number_string;
}

Array.prototype.join()メソッドで0を埋める

少し変わったやり方として、配列を使ってArray.prototype.join()メソッドで0を埋めてみましょう。空の配列をつくったら、ほしい0の数のインデックスに数字を納めます。そのうえで、Array.prototype.join()メソッドの区切り文字に0を渡せば、手前のインデックスは空のまま0がつなげられるのです。

function setDigits(number, digits) {
    let number_string = String(number);
    digits -= number_string.length;
    if (digits > 0) {
        const array = [];
        array[digits] = number_string;
        number_string = array.join('0');
    }
    return number_string;
}

String.prototype.repeat()メソッドで連続した0をつくる

ECMAScript 2015 (ECMAScript 6)に加えられたString.prototype.repeat()メソッドは、参照する文字列が繰り返された新たな文字列をつくります。つまり、文字列の0をいくつでもつなげられるのです。すると、はじめの例のようなfor文は使わなくて済みます。メソッドの引数は繰り返す数です。

function setDigits(number, digits) {
    let number_string = String(number);
    digits -= number_string.length;
    if (digits > 0) {
        number_string = '0'.repeat(digits) + number_string;
    }
    return number_string;
}

String.prototype.padStart()メソッドで文字列の前に0を加える

ECMAScriptt 2017で新たに備わったString.prototype.padStart()はまさに、参照する文字列の頭に指定した文字列を繰り返し差し込んで必要な長さにするメソッドです。引数には、ほしい文字数と繰り返し埋める文字列を渡します。そして、ほしい文字数よりもとの文字数が多ければ、そのままもとの文字列が返されます。

function setDigits(number, digits) {
    const number_string = String(number).padStart(digits, '0');
    return number_string;
}
FumioNonaka
はなし家、もの書き、コード書き。詳しくはwebで。 担当講座: 電気通信大学ウェブシステムデザインプログラム「Web UI・UXプログラミング演習I・Ⅱ」 https://www.websys.edu.uec.ac.jp/ ロクナナワークショップ「Vue.js入門講座」 https://67.org/ws/workshop/detail/0136javascript.html
http://www.fumiononaka.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away