ホームページ > 記事 > ウェブフロントエンド > 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 を超えた場合はどうなりますか? 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 は存在しないため、使用しないでください。これは、コード ベースの一貫性を確保するために、'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ブラウザサポート元のアドレス: https://dmitripavlutin.com/replace-all -string-occurrences -javascript/
プログラミングの詳細については、-関連知識については、プログラミング入門をご覧ください。 ！
以上がJavaScriptのpadStart()メソッドとpadEnd()メソッドの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。