ホームページ > 記事 > ウェブフロントエンド > JavaScriptのpadStart()メソッドとpadEnd()メソッドの詳細な説明

JavaScriptのpadStart()メソッドとpadEnd()メソッドの詳細な説明

青灯夜游オリジナル: 2020-12-09 18:01:365031ブラウズ

ES2017 では、文字列補完長の機能が導入されました。文字列の長さが足りない場合は、先頭または末尾で完成します。 padStart() は先頭補完 に使用され、padEnd() は末尾補完に使用されます。

const string = &#39;hi&#39;;

string.padStart(3, &#39;c&#39;); // "chi"

string.padEnd(4, &#39;l&#39;); // "hill"

構文

string.padStart(<maxLength>, <padString>)

string.padEnd(<maxLength>, <padString>)

パラメータについて

padEnd と padStart は同じパラメータを受け入れます。

1. maxLength

最終文字列の長さ。

const result = string.padStart(5);

result.length; // 5

これを見たとき、私も学ぶのに時間がかかりました。 maxLength は文字列パラメータが繰り返し入力された回数だとずっと思っていました。したがって、 このパラメータは 現在の文字列を埋める必要がある目標の長さであり、埋め込み文字列が繰り返される回数ではないことを 強調したいと思います。この値が現在の文字列の長さより小さい場合は、現在の文字列自体が返されます。

もちろん、読者の皆さんは私よりもはるかに賢いと信じているので、このような混乱はないと思います??

2.padString

PadString はパディング文字列を意味します。文字列が長すぎて、パディングされた文字列の長さが目標の長さを超える場合、左端の部分のみが保持され、他の部分は切り捨てられます。このパラメータのデフォルト値はスペースです " "(U 0020.

&#39;hi&#39;.padStart(5);

// 等价于
&#39;hi&#39;.padStart(5, &#39; &#39;);

空の文字列を渡すと、何も入力されません。

const result = &#39;hi&#39;.padStart(5, &#39;&#39;);

result; // "hi"
result.length; // 2

How他のデータ型を処理するための

2 番目のパラメータ

padString では、string を受け入れます。他のデータ型をそれに渡そうとすると、 toString メソッドを使用して文字列への変換を強制します。さまざまな値の型で toString を使用すると何が起こるかを見てみましょう。

// Number
(100).toString(); // &#39;100&#39;

// Boolean
true.toString();   // &#39;true&#39;
false.toString();  // &#39;false&#39;

// Array
[&#39;A&#39;].toString(); // &#39;A&#39;
[&#39;&#39;].toString();  // &#39;&#39;

// Object
({}).toString();         // &#39;[object Object]&#39;
({hi: &#39;hi&#39;}).toString(); // &#39;[object Object]&#39;

この知識をもとに、これらの他の値タイプは

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>## が発生します。 #しかし、unknown

を 2 番目のパラメータとして

padStart に渡すと、次の結果が得られます:

undefined.toString(); // TypeError: Cannot read property &#39;toString&#39; of undefined

つまり、## は上記 #padString のパラメータ

toString

を使用して強制的に文字列に変換されます。ここでもまた間違っているように感じます??。まず仕様を見てみましょう: ECMAScript 仕様: Ifパディングされた文字列は

未定義

です。パディングされた文字列はスペース (0x0020) として規定されます。わかりました、修正しましょう。未定義 を除き、それ以外の場合は他のすべてのデータを修正します渡された型は、

toString

.padString が maxLength を超えた場合はどうなりますか?What if

maxLength

値が以下の場合、または現在の文字列の長さに等しい場合は、現在の文字列自体が返されます。<pre class="brush:js;toolbar:false">&#39;SAM&#39;.padStart(10, undefined); // &#39; SAM&#39;</pre>maxLength が

padString

の長さより小さい場合、

&#39;hi&#39;.padEnd(2, &#39;SAM&#39;);
// &#39;hi&#39;

padStart/padEnd vs PadLeft/padRight

trim メソッドのエイリアスは、## です。 #trimLeft は trimStart

のエイリアスです。trimRight は trimStart

# のエイリアスです。 ## ただし、文字列パディングメソッドの場合は、エイリアスはありません。したがって、padLeft と padRight は存在しないため、使用しないでください。これは、コードベースの一貫性を確保するために、
エイリアスを使用しないことをお勧めする理由でもあります??実用的な使用法padStart を使用する文字列を右揃えにします

&#39;hi&#39;.padEnd(7, &#39;SAMANTHA&#39;);
// &#39;hiSAMAN&#39;

得られた結果

console.log(&#39;JavaScript&#39;.padStart(15));
console.log(&#39;HTML&#39;.padStart(15));
console.log(&#39;CSS&#39;.padStart(15));
console.log(&#39;Vue&#39;.padStart(15));

デジタルコーディング

     JavaScript
           HTML
            CSS
            Vue

ブラウザサポートpadStart

および

PadEnd

は同時に導入されるため、同様のブラウザサポートを共有しますが、IE は使用できますか??

元のアドレス: https://dmitripavlutin.com/replace-all -string-occurrences -javascript/

著者: Dmitri Pavlutin

翻訳アドレス: https://segmentfault.com/a/1190000023721944

プログラミングの詳細については、-関連知識については、プログラミング入門をご覧ください。！

以上がJavaScriptのpadStart()メソッドとpadEnd()メソッドの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Nodejsで画像をバッチクロップするにはどうすればよいですか?次の記事：Nodejsで画像をバッチクロップするにはどうすればよいですか?

続きを見る