Detaillierte Erläuterung der Methoden padStart() und padEnd() in JavaScript

ES2017 führt die Funktion der String-Vervollständigungslänge ein. Wenn eine Zeichenfolge nicht lang genug ist, wird sie am Anfang oder am Ende vervollständigt. padStart() wird für die Head-Vervollständigung und padEnd() für die Tail-Vervollständigung verwendet. 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接受相同的参数。

1. maxLength

最终字符串的长度。

const result = string.padStart(5);

result.length; // 5

当我看到这个时，也花了我一段时间来学习。 我一直以为maxLength是重复填充字符串参数的次数。 所以这里只想强调一下此参数是当前字符串需要填充到的目标长度，不是填充字符串重复的次数。如果这个数值小于当前字符串的长度，则返回当前字符串本身。

当然，我相信读者比我聪明多了，所以我确定你没有这种困惑 ??

2. padString

padString 表示填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的默认值是一个空格 " "（U+0020。

'hi'.padStart(5);

// 等价于
'hi'.padStart(5, ' ');

如果你传入的是一个空字符串，那么什么都不会填充。

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

result; // "hi"
result.length; // 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

这里有一个有趣的例子，如果你强制把 undefined 转成一个字符串，得到一个TypeError:

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

但当我们把undefined作为第二个参数传入padStart，会得到这个：

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

所以上面说的 padString 参数会使用 toString 强制转成字符串使用，到这里感觉又不对了 ??。我们先来看下规范：

ECMAScript 规范 :如果填充的字符串是 undefined，该填充的字符串就会被规制成空格( 0x0020)。

好吧，我们更正一下， 除了undefined，否则传递的所有其他数据类型都将使用toString强制转成字符串。

如果 padString 超过 maxLength 怎么办？

如果 maxLength 数值小于等于当前字符串的长度，则返回当前字符串本身。

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

如果 maxLength 小于 padString 的长度，则  padString 会被截断。

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

padStart/padEnd vs padLeft/padRight

trim 方法具有的别名。

• trimLeft是trimStart的别名
• trimRight 是 trimStart的别名

但是对于字符串填充方法，没有别名。 因此，请勿使用padLeft和padRight，它们不存在。 这也是建议你不要使用trim别名的原因，这样让代码库中具有一致性 ??

实战用事

使用 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 bankNumber = '2222 2222 2222 2222';
const last4Digits = bankNumber.slice(-4);

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

浏览器支持

padStart和padEndrrreee

Syntax

rrreee

Parameter verstehen

padEnd und padStart code> akzeptiert die gleichen Parameter. <blockquote> <h4>1. maxLength</h4> <p>Die Länge der letzten Zeichenfolge. </p>rrreee<p>Als ich das sah, brauchte ich auch eine Weile, um es zu lernen. Ich dachte immer, dass <code>maxLength die Häufigkeit angibt, mit der ein String-Parameter wiederholt gefüllt wird. Deshalb möchte ich hier nur betonen, dass dieser Parameter die Ziellänge ist, bis zu der die aktuelle Zeichenfolge gefüllt werden muss, und nicht die Häufigkeit, mit der die Füllzeichenfolge wiederholt wird. Wenn dieser Wert kleiner als die Länge des aktuellen Strings ist, wird der aktuelle String selbst zurückgegeben.

Natürlich glaube ich, dass die Leser viel schlauer sind als ich, also bin ich sicher, dass Sie diese Verwirrung nicht haben??

2. padString

padString bedeutet Auffüllen Zeichenfolge. Wenn die Zeichenfolge zu lang ist und die Länge der aufgefüllten Zeichenfolge die Ziellänge überschreitet, wird nur der Teil ganz links beibehalten und die anderen Teile werden abgeschnitten. Der Standardwert dieses Parameters ist ein Leerzeichen " "(U+0020.

rrreeeWenn Sie eine leere Zeichenfolge übergeben, wird nichts ausgefüllt. rrreee

So gehen Sie mit anderen Datentypen um

Für den zweiten Parameter padString akzeptiert er einen string. Wenn wir versuchen, andere Daten an diesen Typ zu übergeben. Es ruft die Methode toString auf, um die Konvertierung in einen String zu erzwingen. Mal sehen, was passiert, wenn wir toString für verschiedene Werttypen verwenden kann diese anderen Werttypen an padStart übergeben (padEnd hat das gleiche Verhalten) 🎜rrreee🎜🎜

Verarbeitungundefiniert

🎜 Hier ist ein interessantes Beispiel. Wenn Sie die Konvertierung von undefiniert in einen String erzwingen, erhalten Sie einen TypeError:🎜rrreee🎜Aber wenn wir undefiniert übergeben code> als zweiten Parameter in <code>padStart ein, und Sie erhalten Folgendes: 🎜rrreee🎜Der oben erwähnte Parameter padString verwendet also toString und wird erzwungen in einen String umgewandelt werden soll. Schauen wir uns zunächst die Spezifikation an: 🎜🎜ECMAScript-Spezifikation🎜: Wenn die aufgefüllte Zeichenfolge undefiniert ist, wird die aufgefüllte Zeichenfolge als Leerzeichen (0x0020) angegeben. 🎜🎜Okay, korrigieren wir es, außer Für undefiniert werden alle anderen übergebenen Datentypen mithilfe von toString als String erzwungen. 🎜

Was passiert, wenn padString maxLength überschreitet?

🎜Wenn der maxLength-Wert kleiner oder gleich der Länge der aktuellen Zeichenfolge ist, wird die aktuelle Zeichenfolge selbst zurückgegeben. 🎜rrreee🎜Wenn maxLength kleiner als die Länge von padString ist, wird padString abgeschnitten. 🎜rrreee

padStart/padEnd vs padLeft/padRight

🎜 Alias ​​​​für die trim-Methode. 🎜

• trimLeft ist ein Alias ​​für trimStart
• trimRight ist ein Alias ​​für trimStart Aliase für

🎜Aber für die String-Padding-Methode gibt es keinen Alias. Verwenden Sie daher padLeft und padRight nicht, da sie nicht existieren. Aus diesem Grund wird auch empfohlen, keine trim-Aliase zu verwenden, um die Konsistenz in der Codebasis sicherzustellen??🎜

Praktische Verwendung h2>

Verwenden Sie padStart. Richten Sie die Zeichenfolge rechts aus.

rrreee🎜Das Ergebnis🎜rrreee

Zahlencodierung

rrreee

Browser-Unterstützung

🎜 padStart und padEnd wurden gleichzeitig eingeführt, daher können sie mit Ausnahme des IE beide verwendet werden??🎜🎜🎜Originaladresse: https:/ /dmitripavlutin.com/ replace-all-string-occurrences-javascript/🎜🎜Autor: Dmitri Pavlutin🎜🎜Übersetzungsadresse: https://segmentfault.com/a/1190000023721944🎜🎜🎜Weitere programmierbezogene Kenntnisse finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Methoden padStart() und padEnd() in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!