JavaScript String.trimStart()와 trimEnd() 메서드 완벽 정리

String.trimStart()와 String.trimEnd()란?

JavaScript의 String.trimStart() 메서드는 문자열 앞부분(시작 부분)의 공백을 제거하고, String.trimEnd() 메서드는 문자열 뒷부분(끝 부분)의 공백을 제거합니다.

두 메서드 모두 원본 문자열은 변경하지 않고, 공백이 제거된 새로운 문자열을 반환한다는 점이 특징입니다. 이는 ES2019(ES10)에서 표준으로 도입된 기능으로, 기존의 trim() 메서드가 양쪽 공백을 모두 제거하는 것과 달리 한쪽 방향만 선택적으로 처리할 수 있어 더욱 유연한 문자열 조작이 가능합니다.

다음은 String.trimStart()와 String.trimEnd() 메서드의 사용 예제 코드입니다.

예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>String.trimStart() 및 String.trimEnd() 메서드</h1>
<div><pre class="sample"></pre></div>
<div style="color: green;"><pre class="result"></pre></div>
<button class="Btn">CLICK HERE</button>
<h3>
위의 버튼을 클릭하면 문자열의 앞과 뒤 공백이 제거됩니다
</h3>
<script>
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let str = " HELLO WORLD ";
    sampleEle.innerHTML = str;
    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.innerHTML = "trimStart() :" + str.trimStart() + "|<br>";
        resEle.innerHTML += "trimEnd() :" + str.trimEnd() + "|";
    });
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

JavaScript String.trimStart()와 trimEnd() 메서드 완벽 정리

'CLICK HERE' 버튼을 클릭하면 아래와 같이 각 메서드의 실행 결과를 확인할 수 있습니다.

JavaScript String.trimStart()와 trimEnd() 메서드 완벽 정리

메서드 비교 정리

예제에서 문자열 " HELLO WORLD "는 앞뒤에 공백을 포함하고 있습니다. 버튼을 클릭하면:

trimStart(): 앞쪽 공백만 제거되어 HELLO WORLD | 형태로 출력됩니다.
trimEnd(): 뒤쪽 공백만 제거되어 | HELLO WORLD| 형태로 출력됩니다.

결과 끝에 붙인 | 문자는 공백 제거 여부를 시각적으로 확인하기 위한 것으로, trimStart() 적용 시 왼쪽 공백이 사라지고, trimEnd() 적용 시 오른쪽 공백이 사라지는 것을 쉽게 알 수 있습니다.