JavaScript의 padEnd 문자열 메서드

padEnd 를 사용하면 지정된 길이에 도달하도록 문자열 끝에 문자를 추가합니다. 문자열을 표 형식으로 표시하기 위해 약간의 패딩을 추가하는 것이 좋습니다. 읽기가 훨씬 쉽지 않습니까, 예 🍹

// Display String in Tabular Format with padEnd

// ❌
'Day: Monday' + 'Drink: 🍵'
'Day: Saturday' + 'Drink: 🍹'

// ✅
'Day: Monday'.padEnd(20) + 'Drink: 🍵'
'Day: Saturday'.padEnd(20) + 'Drink: 🍹'

padEnd 매개변수

padEnd는 2개의 매개변수를 허용합니다.

string.padEnd( <length>, <character>)

첫 번째 매개변수: 길이

결과 문자열의 최종 길이입니다. 그것은 필수입니다.

3개의 문자가 있는 문자열로 시작한다고 가정해 보겠습니다. 그리고 길이를 5자로 설정했습니다. 즉, padEnd는 총 길이가 목표 길이인 5자를 충족하도록 2자로 채워집니다.

여기에 예가 있습니다. 패딩된 공간을 보여주기 위해 ·로 공백 문자를 표시하고 있습니다.

'abc'.padEnd(5);

// abc··

두 번째 매개변수: 문자

선택적 매개변수입니다. 위에서 볼 수 있듯이 기본 패딩 문자는 빈 공간입니다. 그러나 다른 문자로 채울 수 있습니다. 괜찮아요! 그냥 여기로 넘기세요.

'hi'.padEnd(10, '!');

// 'hi!!!!!!!!'

표 형식은 고정 폭 글꼴에서만 작동합니다.

그래서 padEnd를 사용하여 테이블 형식의 문자열을 생성하는 예입니다. 한 가지 주의할 점은 Monospace 글꼴에서만 작동한다는 것입니다.

A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space.

Wikipedia

By Garethlwalt - 자신의 작품, CC BY 3.0 , Link

"Roboto"또는 "Monaco"와 같은 글꼴은 Monospace 글꼴입니다. 각 문자의 너비가 동일하다는 의미입니다. "Times New Roman"과 같은 글꼴은 모노스페이스가 아닙니다. 비례하므로 각 문자의 너비가 다릅니다. 그리고 문자마다 폭이 다르기 때문에 padEnd 를 사용하여 테이블 형식을 생성하기가 어렵습니다.

padEnd 대 padStart

문자열 패딩의 목적은 문자열에 문자를 추가하여 결과가 특정 길이를 갖도록 하는 것입니다.
padEnd 문자열 끝에 문자를 추가합니다. 반면 padStart는 문자열의 시작 부분에 문자를 추가합니다.
padEnd

'hello '.padEnd(10, '👋');

// 'hello 👋👋'

padStart

' hello'.padStart(10, '👋');

// '👋👋 hello '

조심해! 이모지로 padEnd

이모티콘으로 패딩하는 경우 이 문제가 발생할 수 있습니다.

'hello '.padEnd(11, '👋');

// 'hello 👋👋�'

마지막 "👋"가 표시되지 않습니다. 그러나 대신 "�"가 표시됩니다. 음, 이모티콘은 일반적으로 2개의 문자로 구성되기 때문입니다.

'👋'.length === 2 // true

따라서 이모티콘으로 패딩하는 경우 충분한 길이를 제공하지 않으면 이모티콘이 잘릴 수 있다는 점에 유의하세요.

커뮤니티 입력

: 추가할 사항: 테이블 형식 스타일을 사용하려면 글꼴이 모노 스페이스여야 하며 HTML 렌더링은 추가 공간을 제거합니다. 이러한 응용 프로그램은 주로 터미널에 표시되는 정보에서 중요합니다.

: padEnd 및 padStart 예 →

자원

MDN Web Docs: String.prototype.padEnd()

Learn JavaScript ES 2017: String padding — padStart & padEnd

Exploring JS: String Padding

Flaviocopes: The String padEnd method

String padding with padStart and padEnd

Alligator: padStart and padEnd String Methods in JavaScript

tc39: ECMAScript spec proposal for String.prototype.{padStart,padEnd}

읽어주셔서 감사합니다 ❤
안녕하세요! | | Facebook | Blog | SamanthaMing.com