String.prototype.padStart()

padStart() メソッドは、結果の文字列が指定した長さになるように、現在の文字列を他の文字列で (必要に応じて繰り返して) 延長します。延長は、現在の文字列の先頭から適用されます。

構文

str.padStart(targetLength [, padString])

引数

targetLength
現在の文字列の延長後に返される文字列の長さです。この値が現在の文字列の長さよりも短い場合、現在の文字列が返されます。
padString Optional
現在の文字列を延長するための文字列です。この文字列が targetLength より長い場合は、右からその長さ分が切り捨てられます。このパラメーターの既定値は、 " " (U+0020 空白) です。

返値

現在の文字列の先頭に延長が適用された String です。

例 1

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"

例 2

// Javascript version of: (unsigned)
//  printf "%0*d" width num
function leftFillNum(num, targetLength) {
    return num.toString().padStart(targetLength, 0);
}

const num = 123;
console.log(leftFillNum(num, 5));
// expected output: "00123"

ポリフィル

ネイティブの対応がない場合は、以下のコードを他のコードよりも前に実行すると、 String.prototype.padStart() を生成します。

// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
if (!String.prototype.padStart) {
    String.prototype.padStart = function padStart(targetLength, padString) {
        targetLength = targetLength >> 0; //truncate if number, or convert non-number to 0;
        padString = String(typeof padString !== 'undefined' ? padString : ' ');
        if (this.length >= targetLength) {
            return String(this);
        } else {
            targetLength = targetLength - this.length;
            if (targetLength > padString.length) {
                padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
            }
            return padString.slice(0, targetLength) + String(this);
        }
    };
}

仕様書

仕様書 状態 備考
ECMAScript Latest Draft (ECMA-262)
String.prototype.padStart の定義
ドラフト ECMAScript 2017 で初回定義。
ECMAScript 2017 (ECMA-262)
String.prototype.padStart の定義
標準

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
padStartChrome 完全対応 57Edge 完全対応 15Firefox 完全対応 48IE 未対応 なしOpera 完全対応 44Safari 完全対応 10WebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 48Opera Android 完全対応 43Safari iOS 完全対応 10Samsung Internet Android 完全対応 7.0nodejs 完全対応 8.0.0
完全対応 8.0.0
完全対応 7.0.0
無効
無効 From version 7.0.0: this feature is behind the --harmony runtime flag.

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報