文字列パッド

18974 ワード

codenewbie webdev beginners javascript テキストリンク

それは文字列をパッドに超簡単です!ちょうどあなたの希望の文字列と長さを渡します.長さが満たされるまで、文字列はパディングされます.PadStartを使用して開始時にそれを適用し、最後に適用するpadend🎀

const string = 'hi';

string.padStart(3, 'c'); // "chi"

string.padEnd(4, 'l'); // "hill"

構文

これはメソッドの使用方法の構文です.

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

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

パラメータの理解

padEnd and padStart 同じパラメータを受け入れます.

1 . maxlength

これは結果文字列の最大長です.

const result = string.padStart(5);

result.length; // 5

私がこれを学んでいたとき、これは把握するのにしばらく私を連れて行きました.私はパッド文字列引数が繰り返される回数であると考え続けました.ですから、このパラメータが結果文字列の最大または目標の長さを設定していることを強調したいだけです.パッド文字列が繰り返される量ではありません.しかし、あなたは私よりずっと賢いので、私はあなたがこの混乱を持たなかったと確信します😆

2 .文字列

これは文字列を入力したい文字列です.これはオプションです.何も指定しないなら、デフォルトは空のスペースです.

'hi'.padStart(5);

// Same as
'hi'.padStart(5, ' ');

空の文字列をパスしようとするとパディングは発生しません.

const result = 'hi'.padStart(5, 'hi');

result; // ''
result.length; // 2

他のデータ型をどのように扱うか

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 は同じ動作をする).

'SAM'.padStart(8, 100);    // '10010SAM'

'SAM'.padStart(8, true);   // 'truetSAM'
'SAM'.padStart(8, false);  // 'falseSAM'

'SAM'.padStart(5, ['']);   // 'SAM'
'SAM'.padStart(5, ['hi']); // 'hiSAM'

'SAM'.padStart(18, {});         // '[object Object]SAM'
'SAM'.padStart(18, {hi: 'hi'}); // '[object Object]SAM'

未定義の取り扱い

でも面白いものです.あなたが強制しようとするときundefined , あなたが得るTypeError

undefined.toString(); // TypeError: Cannot read property 'toString' of undefined

しかし、あなたが通るときundefined 2番目の引数として、次のようにします.

'SAM'.padStart(10, undefined);
// '       SAM'

それで、私が言ったときpadString 引数はtoString , 私は、ちょうどあなたに嘘をつきました🙊 さて、specに飛び込みましょう.

ECMAScript Spec If fillString is undefined, let filler be the String value consisting solely of the code unit 0x0020 (SPACE).

さて、私は私が言った更新しましょう!そうでない限りundefined , あなたが通過した他のすべてのデータ型はtoString 😉

padstringがmaxlengthを超えるならば、どうですか？

最初の引数maxLength あなたの最初の引数のために十分な長さを許しません.padString , 単に無視されます.

'hi'.padEnd(2, 'SAM');
// 'hi'

または、それが切られるならば.記憶するmaxLength 最大長さpadString は、文字列によって占有されていることをマイナスに占有することができます.

'hi'.padEnd(7, 'SAMANTHA');
// 'hiSAMAN'

そして、もしあなたの最初の引数maxLength それ以降の文字列は、単に文字列を返すだけです.

'hello'.padEnd(1, 'SAM');
// 'hello'

padstart / padend対padleft / padright

前のコードノートでString Trim トリムメソッドにはエイリアスがあります.

trimLeft はtrimStart

trimRight はtrimEnd

しかし、文字列パッドメソッドでは、エイリアスはありません.使用しないでくださいpadLeft and padRight , 存在しない.また、コードベースでより良い一貫性があるようにトリムの別名を使用しないよう奨励されている理由です😄

ユースケース

表形式の表形式

文字列パッドメソッドの良いユースケースは、書式設定用です.カバーしたhow to display string in tabular format .

padstartと文字列を揃える

あなたが正しいアライメントをフォーマットすることができますpadStart .

console.log('JavaScript'.padStart(15));
console.log('HTML'.padStart(15));
console.log('CSS'.padStart(15));
console.log('Vue'.padStart(15));

出力します.

     JavaScript
           HTML
            CSS
            Vue

領収書書式

右揃えの書式設定については、以下のように領収書プリントを模倣できます.

const purchase = [
  ['Masks', '9.99'],
  ['Shirt', '20.00'],
  ['Jacket', '200.00'],
  ['Gloves', '10.00'],
];

purchase.forEach(([item, price]) => {
  console.log(item + price.padStart(20 - item.length));
});

出力します.

Masks           9.99
Shirt          20.00
Jacket        200.00
Gloves         10.00

マスキング番号

また、マスク番号を表示するために使用することができます.

const bankNumber = '2222 2222 2222 2222';
const last4Digits = bankNumber.slice(-4);

last4Digits.padStart(bankNumber.length, '*');
// ***************2222