JS文字列補完メソッドpadStart（）およびpadEnd（）の概要

1.文字列補完について

文字列補完記事のサムネイル

JSでは、文字列の補完が一般的な操作であり、最も一般的に使用されるのは、時刻または日付の前の補数です0。

たとえば、日付の場合、次のような4-2-2表現を使用することがよくあります。

2018-07-23

タイムスタンプを使用して月を取得する場合、前の月はありません。0次に例を示します。

var month = new Date（）。getMonth（）+ 1; //結果は7です

実行結果表示

この時点で完了する必要があります。通常の方法は次のとおりです。

if（month <10）{ 
    month = '0' + month; 
}

塗りつぶし'0'メソッドを具体的に定義することもできます。たとえば、このタイムスタンプ日付転送マイクロコードは、zeroメソッド内でカスタム化されています。

完了方法コードの概略図

ただし、JS文字列補完メソッドpadStart()とpadEnd()の出現により、同様のシナリオがはるかに使いやすくなりました。

2.padStartについて

padStart文字列の先頭で文字補完を実行できます。

構文は次のとおりです。

str.padStart（targetLength [、padString]）

その中で：

targetLength（オプション）
targetLengthターゲット文字列の長さを参照します。
その後、私のテストによると、targetLengthパラメータはデフォルトでエラーを報告せず、元の文字列はそのまま返されますが、コードには意味がないため、基本的に使用する理由はありません。
また、targetLengthパラメーターの型は、数値型または弱い数値型にすることができます。JavaScript1 == '1'では、1は数値です。'1'本質的に文字列ですが、弱い数値と見なすこともできます。このpadStart()方法では、数値型または弱い数値型のいずれかを使用できます。例えば：
```
'zhangxinxu'.padStart（' 5 '）;
```
したがって、実際に使用する場合、targetLengthパラメーターに対して必須の型変換を実行する必要はありません。
最後に、targetLength設定された長さが文字列自体よりも小さい場合、元の文字列はそのまま返されます。次に例を示します。
```
'zhangxinxu'.padStart（5）;     
//結果はまだ' zhangxinxu 'です
```
padString（オプション）
padString長さを完成させるために使用される文字列を表します。ただし、意味的には文字列ですが、私のテストによれば、任意のタイプの値が可能です。ChromeブラウザとFirefoxブラウザの両方が、このパラメータを文字列に変換して完了しようとします。たとえば、次の例：
```
'zhangxinxu'.padStart（15、false）; //結果は' falsezhangxinxu 'です
```
```
'zhangxinxu'.padStart（15、null）; //結果は' nullnzhangxinxu 'です
```
```
'zhangxinxu'.padStart（15、[]）; //文字列に変換された[]は空の文字列であるため、結果は' zhangxinxu 'になります。
```
```
'zhangxinxu'.padStart（15、{}）; //結果は' [objezhangxinxu '、' [objectObject] 'の最初の5文字のみが表示されます
```
padStringパラメータのデフォルト値は通常のスペース' '（U + 0020）です。これは、スペースキーを押したときに表示されるスペースです。
上記の場合から、完了文字列の長さが十分でない場合はループで完了し続け、長さが超える場合は左から順番に完了し、そうでない文字列は完了していることがわかります。塗りつぶしは無視されます。

このメソッドの戻り値は、完成した文字列です。

最初の日付補足'0'関数に戻ると、padStart()メソッドを使用して、コードを次の行に簡略化できます。

var month = String（new Date（）。getMonth（）+ 1）.padStart（2、 '0'）; //結果は '07'です

互換性

IE14は、既存のブラウザーではサポートされていません。現在もWindows 7を使用しているため、PC端末を外部プロジェクトに直接使用することはできません。モバイル端末、UCブラウザー、QQブラウザーもサポートされていません。ただし、使用できないわけではありません。後で表示されるポリフィルを追加するだけです。

3.padEndについて

padEnd文字列の最後で文字補完を実行でき、文法パラメータもpadStart同様です。

文法：

str.padEnd（targetLength [、padString]）

その中で：

targetLength（オプション）
targetLength完了後の文字列の長さを指します。
そして、私のテストによれtargetLengthば、パラメータが設定されていない場合、エラーは報告されず、元の文字列が直接返されますが、コードは無意味です。したがって、実際の開発では、このパラメータを設定する必要があります。
同様にtargetLength、パラメーターの型は、数値型または弱い数値型にすることができます。たとえば、次の2つの使用法がすべて可能です。
```
'zhangxinxu'.padEnd（' 15 '）; 
' zhangxinxu'.padEnd（15）;
```
したがって、実際にコードを作成するときに、targetLengthパラメーターを強制的に数値にする必要はありません。
最後に、targetLength設定された長さが文字列自体よりも小さい場合、元の文字列は変更されずに返されます。次に例を示します。
```
'zhangxinxu'.padEnd（5）;     
//結果はまだ' zhangxinxu 'です
```
targetLength厄介な数値型の場合は、元の文字列も返します。例えば：
```
'zhangxinxu'.padEnd（false）;     
//結果はまだ' zhangxinxu 'です
```
しかし、それは理にかなっていますか？意味がないので、そのように使用しないでください。
padString（オプション）

padString長さを完成させるために使用される文字列を表します。意味的には文字列ですが、実際にはこのパラメーターはさまざまなタイプにすることができます。たとえば、次の例：

'zhangxinxu'.padEnd（15、false）; //結果は' zhangxinxufalse 'です

'zhangxinxu'.padEnd（15、null）; //結果は' zhangxinxunulln 'です

'zhangxinxu'.padEnd（15、[]）; //文字列に変換された[]は空の文字列であるため、結果は' zhangxinxu 'になります。

'zhangxinxu'.padEnd（15、{}）; //結果は' zhangxinxu [obje 'であり、' [objectObject] 'の最初の5文字のみが表示されます。

上記の場合から、補完文字列の長さが足りない場合は左から右に補完し続け、完成できる文字の長さを超えると同程度に完成することがわかります。左から可能な限り、完了できない場合は無視することしかできません。たとえば、最大5文字に'zhangxinxu'.padEnd(15, {})相当するものを'zhangxinxu'.padEnd(15, '[object Object]')作成できるため'[object Object]'、最初の5文字しか作成できないため、最終結果は次のようになり'zhangxinxu[obje'ます。

padStringパラメータが設定されていない場合は、' '代わりに通常のスペース（U + 0020）が使用されます。これは、スペースキーによって生成されたスペースです。

バックで文字列を完成させる場合を考えてみましょう
。JSフロントエンドでタイムスタンプを処理する場合、単位はmsミリ秒です。ただし、バックエンドの学生から返されるタイムスタンプはミリ秒と同じではありません。s秒単位で10桁。したがって、このタイムスタンプをフロントエンドで処理する場合、安全のために、最初に13ビットの完了を行い、単位がミリ秒であることを確認する必要があります。使用上のヒント：

タイムスタンプ= + String（timestamp）.padEnd（13、 '0'）;

互換性

この文字列APIはES6の新しいメソッドです。IE14は既存のブラウザのためにサポートしていません。また、一部の国内モバイルブラウザもサポートしていません。現在、Polyfillコードは外部プロジェクトに添付する必要があります。

4、ポリフィルコード

次のPolyfillコードは、polyfillプロジェクトのstring.polyfill.jsから取得されます。依存関係repeat()も新しいES6メソッドであるため、Polyfillコードの完成は次のとおりです。コメント部分の簡単な翻訳を行い、コード部分は少しロジックを単純化します。バグが修正されました。以下のコードの赤で強調表示された部分は修正の内容です。

// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js// repeat（）メソッド的polyfillif（！String.prototype.repeat）{ 
    String.prototype.repeat = function（count） { 
        '厳密に使用'; 
        if（this == null）{ 
            throw new TypeError（ 'can \' t convert '+ this +' to object '）; 
        } 
        var str = '' + this; 
        カウント= +カウント; 
        if（count！= count）{ 
            count = 0; 
        } 
        if（count <0）{ 
            throw new RangeError（ 'repeat count must be non-negative'）; 
        } 
        if（count == Infinity）{ 
        count = Math.floor（count）; 
            throw new RangeError（ '
        }
        if（str.length == 0 || count == 0）{ 
            return ''; 
        } 
        if（str.length * count> = 1 << 28）{ 
            throw new RangeError（ 'リピートカウントは最大文字列サイズをオーバーフローしてはならない'）; 
        } 
        var rpt = ''; 
        for（
                ;; ）{ 
            if（（count＆1）== 1）{ rpt + = str; 
            }
            カウント>>> = 1; 
            if（count == 0）{ 
                break; 
            } 
            str + = str; 
        } 
        return rpt; 
    } 
} // padStart（）方法的polyfillif（！String.prototype.padStart）{
    String.prototype.padStart = function（targetLength、padString）{//数値を
        切り捨てるか、数値以外を0に変換しますtargetLength = targetLength >> 0;  
        padString = String（（typeof padString！== 'undefined'？padString： ''） ）; 
        if（this.length> targetLength || padString === ''）{ 
            return String（this）; 
        } 
        targetLength = targetLength-this.length; 
        if（targetLength> padString.length）{//初期値に追加長さが十分であることを確認してください
            padString + = padString.repeat（targetLength / padString.length）;  
        } 
        return padString.slice（0、targetLength）+ String（this）; 
    }; 
} // polyfillif（！String.prototype。）of padEnd（）メソッド。padEnd）{
    String.prototype.padEnd = function（targetLength、padString）{//変換数值または非数值変換换成0 
        targetLength = targetLength >> 0; 
        padString = String（（typeof padString！== 'undefined'？padString： ''））; 
        if（this.length> targetLength || padString === ''）{ 
            return String（this）; 
        } 
        targetLength = targetLength-this.length; 
        if（targetLength> padString.length）{//追加到初期初期值以确保TTL
            度足够padString + = padString.repeat（targetLength / padString.length）; 
        } 
        return String（this）+ padString.slice（0、targetLength）; 
    }; 
}

上記のポリフィルコードは、呼び出し元padStart()/padEnd()メソッドコードの前に配置し、適切な位置に貼り付けるだけで済みます。そうすれば、ブラウザのバージョンに関係なく、IE6、IE8でも、自信を持って使用padStart()またはpadEnd()メソッドを実行できます。

ポリフィルコードでのデモケース

ここをクリックしてください：padStartおよびpadEndメソッドのポリフィルテストデモ

このテストデモでは、元のポリフィルメソッドのバグがテストされました。以下は、IE9ブラウザーで修正されたポリフィルコードのテスト結果のスクリーンショットです。

テスト結果のスクリーンショット

V.結論

タイトルは紹介ですが、この記事の内容は実は非常に詳細です。padStart()そして、padEnd()2つのメソッドパラメータは非常にフォールトトレラントであり、JSの非常に特徴的であり、私はそれが非常に好きです。ただし、別の問題も発生します。つまり、さまざまな理由でパラメータ値が期待したパラメータ値でない場合、エラーが発生せず、操作は正常であるため、非常に隠れたバグが発生する可能性が非常に高くなります。。。したがって、強力なフォールトトレランスは長所と短所の両方と見なすことができます。

ES6さらに拡張ストリング本明細書に記載に加えて多くの他の方法、repeat()方法、並びにnormalize()、trimStart()、trimEnd()および他のAPIの方法。その後、ひとつひとつ詳細を見ていきます。