[JavaScript] 자바스크립트 문자열 길이 맞추기
2022. 5. 24. 17:03ㆍProgram/JavaScript
041_자바스크립트 문자열 길이 맞추기
[적용]
- 10 미만의 숫자 앞에 0을 붙여 두 자리 형식을 만들고 싶을 때
[문법]
| 메소드 | 의미 | 반환 |
| 문자열.padStart(전체길아, [추가문자열*] | 문자열 시작 부분에 문자열 추가 | 문자열 |
| 문자열.padEnd(전체길이, [추가문자열*]) | 문자열 끝 부분에 문자열 추가 | 문자열 |
* 생략 가능
[내용]
padStart(), padEnd() 는 문자열이 지정한 길이가 될 때까지 작업을 반복한다.
'5'.padStart(2, '0'); // 05
'ff'padEnd(6, '0'); // ff0000
지정한 길이가 실제 문자열보다 짧은 경우 문자열 변환은 이루어지지 않는다.
인수에 추가 문자열을 생략하면 공백이 입력된다.
'123'.padStart(3, '0'); // 123
'ff'.padStart(6); // ' ff' 앞부분에 4개의 공백이 삽입됨[예시]
padStart()와 관련하여 디지털 시계의 표시 방식에 대해 알아보자.
현재 시각을 시, 부느 초로 나누고 시간의 경과에 따라 시간을 표시한다.
HTML index.html
<body>
<span class="hour"></span>
: <span class="minute"></span>
: <span class="second"></span>
</body>JavaScript main.js
/** 시간 */
const hourElement = document.querySelector('.hour');
/** 분 */
const minuteElement = document.querySelector('.minute');
/** 초 */
const secondElement = document.querySelector('.second');
update();
/**
* 현재 시간 표시 처리
*/
function update() {
const currentTime = new Date();
// 시간 단위의 표시
const hour = currentTime.getHours();
hourElement.innerText = addZeroPadding(hour);
// 분 단위의 표시
const minute = currentTime.getMinutes();
minuteElement.innerText = addZeroPadding(minute);
// 초 단위의 표시
const second = currentTime.getSeconds();
secondElement.innerText = addZeroPadding(second);
// 프레임에서 update() 재실행
requestAnimationFrame(update);
}
/**
* 두 자리 형식이 되도록 앞부분에 0을 추가하는 함수
* @param num
* @returns {string}
*/
function addZeroPadding(num) {
return String(num).padStart(2, '0');
}코드 내 정의한 addZeroPadding()은 파라미터 num이 10 미만의 한 자리 숫자이면 앞에 0을 붙인 문자열을 반환하고,
10 미만이 아니라면 값을 그대로 반환하는 함수이다.
실행결과
10 미만이면 앞에 0을 붙여 표시한다
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 문자열 디코드(Decode) 하기 (0) | 2022.05.24 |
|---|---|
| [JavaScript] 자바스크립트 문자열 URI 이스케이프(Escape) 처리하기 (0) | 2022.05.24 |
| [JavaScript] 자바스크립트 소수점 자리수 지정하기 (0) | 2022.05.24 |
| [JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기) (0) | 2022.05.24 |
| [JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기) (0) | 2022.05.24 |