JavaScript String, 문자열 다루기

JavaScript String, 문자열 다루기

JavaScript에서 문자열(String)은 단순한 텍스트를 넘어서, 데이터 처리, 표현, 통신의 중심에 있습니다. 문자열 메서드를 정확히 이해하고 활용하는 것은 프론트엔드 개발은 물론, 백엔드 로직의 품질과 성능에도 직결됩니다. 이 글은 흔한 메서드 나열을 넘어서, 각 기능의 맥락과 실제 쓰임새를 중심으로 구성된 실전형 가이드입니다.

 

 

목차

1. 문자열 생성과 기초 개념
2. length와 charAt(): 문자 접근의 시작
3. slice(), substring(), substr() 차이점
4. replace()와 정규표현식 활용
5. trim(), padStart(), padEnd()로 포맷팅
6. split()과 join(): 분리와 재조립
7. 템플릿 리터럴과 문자열 인터폴레이션

 

1. 문자열 생성과 기초 개념

문자열은 작은 따옴표('), 큰 따옴표("), 백틱(`) 중 어떤 것으로 감싸도 생성할 수 있습니다.

• 문자열은 불변(immutable)합니다. 즉, 한 번 생성되면 수정되지 않습니다.
• 문자열은 배열처럼 인덱스로 접근할 수 있지만, 직접 수정은 불가능합니다.

const str = "Hello";
console.log(str[1]); // 'e'
  

 

 

 

2. length와 charAt(): 문자 접근의 시작

문자열의 길이는 length 속성으로 확인하고, 개별 문자는 charAt(index)로 접근할 수 있습니다.

• charAt()은 안전한 문자 접근을 위한 메서드입니다. (index가 범위를 벗어나면 빈 문자열 반환)
• str[index]는 대체 문법이지만 오래된 브라우저 호환성이 떨어질 수 있습니다.

const name = "JavaScript";
console.log(name.length); // 10
console.log(name.charAt(4)); // 'S'
  

 

 

 

3. slice(), substring(), substr() 차이점

자바스크립트에는 문자열을 자르는 메서드가 세 가지 있습니다. 목적에 따라 선택이 중요합니다.

메서드	설명	음수 허용 여부
slice(start, end)	시작~끝 인덱스 (end는 제외)	허용
substring(start, end)	음수 미지원, 인덱스 교환 가능	불가
substr(start, length)	시작 인덱스부터 길이만큼	허용

 

 

 

4. replace()와 정규표현식 활용

replace()는 문자열 내 특정 문자열을 다른 문자열로 바꾸며, 정규표현식과 함께 사용하면 강력한 텍스트 처리 도구가 됩니다.

• 기본적으로 첫 번째 일치 항목만 변경됩니다.
• 모든 항목을 바꾸려면 정규표현식에 /g 플래그를 사용합니다.

const str = "apple apple banana";
const newStr = str.replace(/apple/g, "orange");
console.log(newStr); // 'orange orange banana'
  

 

 

 

 

5. trim(), padStart(), padEnd()로 포맷팅

문자열의 형태를 다듬을 때 유용한 메서드들입니다.

• trim(): 앞뒤 공백 제거
• padStart(), padEnd(): 자릿수 맞추기나 형식 맞춤에 유용

"7".padStart(3, "0"); // '007'
"Hello   ".trim();    // 'Hello'
  

 

 

 

6. split()과 join(): 분리와 재조립

문자열을 배열로 쪼개거나, 배열을 문자열로 합칠 때 사용하는 필수 메서드입니다.

• split(): 구분자를 기준으로 문자열 → 배열
• join(): 배열 → 문자열로 변환

const str = "red,green,blue";
const colors = str.split(",");
console.log(colors); // ['red', 'green', 'blue']
console.log(colors.join(" | ")); // 'red | green | blue'
  

 

 

 

7. 템플릿 리터럴과 문자열 인터폴레이션

백틱(`)을 사용한 템플릿 리터럴은 문자열을 다룰 때 문법적 유연성과 가독성을 극대화시킵니다.

• 줄바꿈 포함 가능
• ${변수} 구문으로 표현식을 삽입 가능

const name = "Jane";
const message = `안녕하세요, ${name}님!
환영합니다.`;