Enjoy Programming

[ES] padStart and padEnd 본문

JavaScript/Vanilla Js

[ES] padStart and padEnd

LEETAEEON 2021. 7. 7. 12:21

padStart 와 padEnd에 대해 알아보자.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

 

String.prototype.padStart() - JavaScript | MDN

padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다.

developer.mozilla.org

padStart()메소드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다.

채워넣기는 대상 문자열의 시작부터 적용된다.

padEnd()는 반대로 생각하면 된다~ 뒤에서부터?

 

그럼 바로 예를 들어보자 . 시간을 출력해보면~

이렇게 출력해볼 수 있다. 그냥 12:2:5이렇게 표현도 되겠지만 이쁘게 표현하기 위해~ 코드가 이렇게 길어진다.

padStart를 사용해보자

간결해지긴 했는데.. padStart가 string 에만 써줘야 하기 때문에... 이경우 string으로 변수들을 변환해줬다

...좀 복잡해보이네 ㅋ 그래도 더 간결해진다.

padStart를 이용해 hours라는 변수에 있는 string이 2개의 문자열로 구성되어있어야 하고 만약 두개가 아니라면 시작부터 0을 채워나간다는 의미이다.

함수를 살펴보면 첫번째 파라미터로 maxLength를 규정해주고 (숫자), 두번째 파라미터로 채울 문자를 정해준다.

padEnd도 마찬가지로 파라미터를 동일하게 갖지만 반대로 뒤에서부터 채워준다는 것이다.

 

한가지 주의할점은 두함수는 값을 returns한다. 고로 기존의 값을 변형하지 않는다는 것이다.

 

이렇게 말이다~

'JavaScript > Vanilla Js' 카테고리의 다른 글

[ES] Object entries, Object values, Object fromEntries  (0) 2021.07.07
[ES] trim, trimStart, trimEnd  (0) 2021.07.07
[ES] optional chaining  (0) 2021.07.07
[ES]?? Operator: Nullish coalescing operator  (0) 2021.07.07
[ES6] Proxy  (0) 2021.07.06