JavaScriptのpadStart()メソッドとpadEnd()メソッドの詳細な説明-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2020-12-09 18:01:36

オリジナル

4982 人が閲覧しました

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

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

: <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>## が発生します。 #しかし、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

値が以下の場合、または現在の文字列の長さに等しい場合は、現在の文字列自体が返されます。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">&#39;SAM&#39;.padStart(10, undefined); // &#39; SAM&#39;</pre><div class="contentsignin">ログイン後にコピー</div></div>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 サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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

構文

パラメータについて

1. maxLength

の長さより小さい場合、

PadEnd

著者: Dmitri Pavlutin

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