📌 padStart() & padEnd() 개념 정리 🚀
padStart()와 padEnd()는 JavaScript의 문자열(String) 메서드로,
✅ 특정 길이만큼 문자열을 채울 때 사용됨
✅ 기본적으로 문자열의 길이가 지정한 길이보다 짧으면 채움 문자(padding)을 추가
✅ padStart() vs padEnd() 기본 개념
| 메서드 | 설명 | 예제 |
|---|---|---|
padStart(targetLength, padString) | 문자열 앞을 특정 문자로 채움 | "5".padStart(3, "0") → "005" |
padEnd(targetLength, padString) | 문자열 뒤를 특정 문자로 채움 | "5".padEnd(3, "0") → "500" |
📌 즉, padStart()는 문자열 앞쪽에, padEnd()는 문자열 뒤쪽에 채움 문자를 추가함.
📌 1. padStart() 사용법
console.log("5".padStart(3, "0")); // "005"
console.log("42".padStart(5, "0")); // "00042"
console.log("hello".padStart(10, ".")); // ".....hello"✅ 문자열 앞을 "0" 또는 "."로 채워서 원하는 길이를 맞춤!
📌 2. padEnd() 사용법
console.log("5".padEnd(3, "0")); // "500"
console.log("42".padEnd(5, "0")); // "42000"
console.log("hello".padEnd(10, "-")); // "hello-----"✅ 문자열 뒤를 "0" 또는 "-"로 채움!
📌 3. 실무에서 많이 쓰이는 경우
1️⃣ 숫자를 항상 일정한 자릿수로 표시 (ex. 2자리 숫자)
const month = "3";
console.log(month.padStart(2, "0")); // "03"✅ 한 자리 숫자를 두 자리로 맞출 때 유용함.
2️⃣ 비밀번호 마스킹 처리
const password = "1234";
console.log(password.padStart(password.length, "*")); // "****"✅ 비밀번호를 *로 가려서 표시할 때 사용 가능!
3️⃣ 주문 번호, 영수증 번호 등 포맷팅
const orderNumber = "42";
console.log(orderNumber.padStart(6, "0")); // "000042"✅ 영수증 번호나 주문 번호를 고정된 길이로 맞출 때 사용됨.
🚀 최종 정리
| 메서드 | 설명 | 예제 |
|---|---|---|
padStart(targetLength, padString) | 문자열 앞쪽에 padString을 추가하여 targetLength 길이로 맞춤 | "5".padStart(3, "0") → "005" |
padEnd(targetLength, padString) | 문자열 뒤쪽에 padString을 추가하여 targetLength 길이로 맞춤 | "5".padEnd(3, "0") → "500" |
✅ padStart() → 앞쪽을 채움
✅ padEnd() → 뒤쪽을 채움
👉 즉, padStart()와 padEnd()는 숫자 포맷팅, 비밀번호 마스킹, 주문 번호 같은 곳에서 자주 사용됨! 🚀
