집 > 기사 > 웹 프론트엔드 > JavaScript의 padStart() 및 padEnd() 메소드에 대한 자세한 설명

JavaScript의 padStart() 및 padEnd() 메소드에 대한 자세한 설명

青灯夜游원래의: 2020-12-09 18:01:365031검색

ES2017에는 문자열 완성 길이 기능이 도입되었습니다. 문자열이 충분히 길지 않으면 머리나 꼬리에서 완성됩니다. padStart()는 헤드 완성 에 사용되고 padEnd()는 테일 완성에 사용됩니다. 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

如何处理其他数据类型

对于第二个参数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具有相同的行为）。

&#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;

处理 `undefined`

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

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

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

&#39;SAM&#39;.padStart(10, undefined);
// &#39;       SAM&#39;

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

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

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

如果 padString 超过 maxLength 怎么办？

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

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

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

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

padStart/padEnd vs padLeft/padRight

trim 方法具有的别名。

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

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

实战用事

使用 padStart 让字符串右对齐

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

数字打码

const bankNumber = &#39;2222 2222 2222 2222&#39;;
const last4Digits = bankNumber.slice(-4);

last4Digits.padStart(bankNumber.length, &#39;*&#39;);
// ***************2222

浏览器支持

padStart和padEndrrreee

구문

rrreee

매개변수 이해

padEnd 및

padStart code>는 동일한 매개변수를 허용합니다. <blockquote>
<h4>1. maxLength</h4>
<p>최종 문자열의 길이입니다. </p>rrreee<p> 이걸 봤을 때 저도 배우는 데 시간이 좀 걸렸어요. 저는 항상 <code>maxLength

가 문자열 매개변수가 반복적으로 채워지는 횟수라고 생각했습니다. 따라서 여기서는 이 매개변수가 채워지는 문자열이 반복되는 횟수가 아니라 현재 문자열을 채워야 하는 목표 길이라는 점을 강조하고 싶습니다. 이 값이 현재 문자열의 길이보다 작으면 현재 문자열 자체가 반환됩니다.

물론 독자들이 저보다 훨씬 똑똑하다고 생각하니 이런 혼란은 없으실 거라 믿습니다??

2.padString

padString은 패딩을 의미합니다. 끈. 문자열이 너무 길고 패딩된 문자열 길이가 목표 길이를 초과하는 경우 가장 왼쪽 부분만 유지되고 다른 부분은 잘립니다. 이 매개변수의 기본값은 공백 " "(U+0020입니다.

rrreee빈 문자열을 전달하면 아무것도 채워지지 않습니다. rrreee

다른 데이터 유형을 처리하는 방법

두 번째 매개변수 padString의 경우 문자열을 허용합니다. 다른 데이터를 전달하려고 하면 Type. toString 메서드를 호출하여 문자열로 강제 변환합니다. 다양한 값 유형에 toString을 사용할 때 어떤 일이 발생하는지 살펴보겠습니다. 🎜rrreee🎜이 지식을 바탕으로 이러한 다른 값 유형을 padStart에 전달할 수 있습니다(padEnd는 동일한 동작을 가짐) 🎜rrreee🎜🎜