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

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

구문

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🎜🎜

처리정의되지 않음

🎜 다음은 흥미로운 예입니다. undefine을 문자열로 변환하면 TypeError가 발생합니다. code>를 padStart의 두 번째 매개변수로 사용하면 다음과 같은 결과가 나타납니다. 🎜rrreee🎜따라서 위에서 언급한 padString 매개변수는 toString을 사용하게 됩니다. 여기서는 잘못된 것 같나요?? 먼저 사양을 살펴보겠습니다. 🎜🎜ECMAScript 사양🎜: 패딩된 문자열이 undefine인 경우 패딩된 문자열은 공백(0x0020)으로 지정됩니다. 🎜🎜자, 수정하겠습니다. 정의되지 않음의 경우 전달된 다른 모든 데이터 유형은 toString을 사용하여 문자열로 강제 변환됩니다. 🎜

padString이 maxLength를 초과하면 어떻게 되나요?

🎜 maxLength 값이 현재 문자열 길이보다 작거나 같으면 현재 문자열 자체가 반환됩니다. 🎜rrreee🎜 maxLength가 padString의 길이보다 작으면 padString이 잘립니다. 🎜rrreee

padStart/padEnd vs padLeft/padRight

🎜 trim 메소드에 대한 별칭입니다. 🎜

• trimLeft는 trimStart의 별칭입니다.
• trimRight는 trimStart의 별칭입니다.

에 대한 별칭🎜그러나 문자열 패딩 방법에는 별칭이 없습니다. 따라서 padLeft 및 padRight는 사용하지 마십시오. 존재하지 않습니다. 이는 코드 베이스의 일관성을 보장하기 위해 trim 별칭을 사용하지 않는 것이 권장되는 이유이기도 합니다.??🎜

실용적 사용 h2>

padStart 사용 문자열을 오른쪽으로 정렬

rrreee🎜결과🎜rrreee

숫자 코딩

rrreee

브라우저 지원

🎜 padStart와 padEnd는 동시에 도입되었기 때문에 유사한 브라우저 지원을 공유하며 IE를 제외하면 둘 다 사용할 수 있습니다??🎜🎜🎜원본 주소: https:/ /dmitripavlutin.com/replace-all-string-occurrences-javascript/🎜🎜저자: Dmitri Pavlutin🎜🎜번역 주소: https://segmentfault.com/a/1190000023721944🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 🎜프로그래밍 입문🎜! ! 🎜

위 내용은 JavaScript의 padStart() 및 padEnd() 메소드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!