LoginSignup
5
4

More than 5 years have passed since last update.

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

Posted at

「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;
}
5
4
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4