ホームページ > 記事 > ウェブフロントエンド > JavaScriptのpadStart()メソッドとpadEnd()メソッドの詳細な説明
ES2017 では、文字列補完長の機能が導入されました。文字列の長さが足りない場合は、先頭または末尾で完成します。 padStart()
は先頭補完 に使用され、padEnd()
は末尾補完に使用されます。
const string = 'hi'; string.padStart(3, 'c'); // "chi" string.padEnd(4, 'l'); // "hill"
string.padStart(<maxLength>, <padString>) string.padEnd(<maxLength>, <padString>)
padEnd
と padStart
は同じパラメータを受け入れます。
最終文字列の長さ。
const result = string.padStart(5); result.length; // 5
これを見たとき、私も学ぶのに時間がかかりました。 maxLength
は文字列パラメータが繰り返し入力された回数だとずっと思っていました。したがって、 このパラメータは
現在の文字列を埋める必要がある目標の長さであり、埋め込み文字列が繰り返される回数ではないことを 強調したいと思います。この値が現在の文字列の長さより小さい場合は、現在の文字列自体が返されます。
PadString はパディング文字列を意味します。文字列が長すぎて、パディングされた文字列の長さが目標の長さを超える場合、左端の部分のみが保持され、他の部分は切り捨てられます。このパラメータのデフォルト値はスペースです
" "(U 0020.
'hi'.padStart(5); // 等价于 'hi'.padStart(5, ' ');空の文字列を渡すと、何も入力されません。
const result = 'hi'.padStart(5, ''); result; // "hi" result.length; // 2How他のデータ型を処理するための 2 番目のパラメータ
padString では、
string を受け入れます。他のデータ型をそれに渡そうとすると、
toString メソッドを使用して文字列への変換を強制します。さまざまな値の型で
toString を使用すると何が起こるかを見てみましょう。
// Number (100).toString(); // '100' // Boolean true.toString(); // 'true' false.toString(); // 'false' // Array ['A'].toString(); // 'A' [''].toString(); // '' // Object ({}).toString(); // '[object Object]' ({hi: 'hi'}).toString(); // '[object Object]'この知識をもとに、これらの他の値タイプは
padStart に設定されます (
padEnd も同じ動作になります)。
これは興味深い例です。unknown を強制的に文字列に変換すると、
TypeError<pre class="brush:js;toolbar:false">&#39;SAM&#39;.padStart(8, 100); // &#39;10010SAM&#39;
&#39;SAM&#39;.padStart(8, true); // &#39;truetSAM&#39;
&#39;SAM&#39;.padStart(8, false); // &#39;falseSAM&#39;
&#39;SAM&#39;.padStart(5, [&#39;&#39;]); // &#39;SAM&#39;
&#39;SAM&#39;.padStart(5, [&#39;hi&#39;]); // &#39;hiSAM&#39;
&#39;SAM&#39;.padStart(18, {}); // &#39;[object Object]SAM&#39;
&#39;SAM&#39;.padStart(18, {hi: &#39;hi&#39;}); // &#39;[object Object]SAM&#39;</pre>## が発生します。 #しかし、
unknownpadStart に渡すと、次の結果が得られます:
undefined.toString(); // TypeError: Cannot read property 'toString' of undefined
つまり、## は上記 #padString
のパラメータtoString を使用して強制的に文字列に変換されます。ここでもまた間違っているように感じます??。まず仕様を見てみましょう: ECMAScript 仕様
: Ifパディングされた文字列は
です。パディングされた文字列はスペース (0x0020) として規定されます。わかりました、修正しましょう。
未定義
を除き、それ以外の場合は他のすべてのデータを修正します渡された型は、
.padString が maxLength を超えた場合はどうなりますか?
What if
maxLength 値が以下の場合、または現在の文字列の長さに等しい場合は、現在の文字列自体が返されます。<pre class="brush:js;toolbar:false">&#39;SAM&#39;.padStart(10, undefined);
// &#39; SAM&#39;</pre>
maxLength
が
'hi'.padEnd(2, 'SAM'); // 'hi'
padStart/padEnd vs PadLeft/padRight
trim メソッドのエイリアスは、
## です。
#trimLeft は
trimStart
のエイリアスです。trimRight は
trimStart
padLeft
と padRight
は存在しないため、使用しないでください。これは、コード ベースの一貫性を確保するために、
実用的な使用法
padStart を使用する文字列を右揃えにします'hi'.padEnd(7, 'SAMANTHA'); // 'hiSAMAN'得られた結果
console.log('JavaScript'.padStart(15)); console.log('HTML'.padStart(15)); console.log('CSS'.padStart(15)); console.log('Vue'.padStart(15));
デジタルコーディング
JavaScript HTML CSS Vue
ブラウザサポート
padStartおよび元のアドレス: https://dmitripavlutin.com/replace-all -string-occurrences -javascript/
プログラミングの詳細については、-関連知識については、
プログラミング入門をご覧ください。 !
以上がJavaScriptのpadStart()メソッドとpadEnd()メソッドの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。