2 분 소요

문자열 메소드 핵심 개념

자바스크립트 문자열 메소드는 텍스트 데이터를 자르고·찾고·변환 하는 데 필수입니다. 아래 표는 가장 많이 쓰는 메소드를 기능별로 묶어 정리한 것입니다.

분류 메소드 특징
검색 indexOf, lastIndexOf, includes, startsWith, endsWith 위치·존재 여부 판단
추출 slice, substring, substr* 부분 문자열 반환 (*substr는 표준에서 제외 예정)
치환 replace, replaceAll 첫 번째 / 모든 매칭 변경
분할·결합 split, join(Array) 구분자 기준 분해·배열 합치기
패딩·반복 padStart, padEnd, repeat 길이 맞추기·문자 반복
공백·대소문자 trim, trimStart, trimEnd, toUpperCase, toLowerCase 문자열 정리
정규식 매칭 match, matchAll, search 패턴 분석
유니코드 charAt, charCodeAt, codePointAt, fromCharCode, fromCodePoint 문자 코드 다루기
  • substr(시작, 길이) 는 유지보수 코드만 읽을 때 참고하세요. 최신 코드는 slice·substring을 사용합니다.

1. 문자열 검색 & 위치 확인

1-1 indexOf, lastIndexOf, includes

const txt = "JavaScript String Method";
txt.indexOf("Script"); // 4
txt.lastIndexOf("t"); // 21
txt.includes("String"); // true
  • indexOf : 앞에서부터 첫 위치(없으면 -1)
  • lastIndexOf : 뒤에서부터 첫 위치
  • includes : 존재 여부를 불리언으로 간단히 반환

1-2 startsWith, endsWith

url.startsWith("https://"); // 보안 연결 확인
file.endsWith(".png"); // 이미지 파일 여부

2. 문자열 추출 – slice vs substring

const code = "ES2025";

code.slice(2); // "2025"   (음수 허용)
code.slice(-2); // "25"
code.substring(2, 4); // "20"   (음수 → 0으로 처리)
  • slice(시작, 끝) : 음수 인덱스로 뒤에서부터 계산
  • substring(시작, 끝) : 작은 값 ↔ 큰 값 자동 교환, 음수 허용 안 함

팁 : 배열 메소드와 이름이 같은 slice를 우선 연상하면 기억하기 쉽습니다.

3. 치환 & 정규식 – replace, replaceAll

const src = "🍎 사과, 🍎 사과, 🍊 오렌지";

src.replace("사과", "apple"); // 첫 번째만
src.replaceAll("사과", "apple"); // 모두 변경
// 정규식 전역 치환
src.replace(/🍎/g, "apple");
  • ES2021부터 replaceAll(검색어, 변경어) 지원
  • 정규식을 쓸 때는 플래그 g 로 전역 치환 가능

4. 분할·결합 – split, join

const csv = "red,green,blue";
const arr = csv.split(","); // ["red","green","blue"]
const back = arr.join(" | "); // "red | green | blue"
  • split : 두 번째 인자 개수 제한 가능 split(",", 2)
  • join : 배열 ➜ 문자열, 구분자 자유 설정

5. 빈칸·패딩·반복

"  hello  ".trim(); // "hello"
"7".padStart(3, "0"); // "007"
"AB".repeat(3); // "ABABAB"
  • trimStart, trimEnd : 앞·뒤 공백만 제거
  • 패딩은 고정 길이 문자열(번호·시간) 만들 때 유용

6. 템플릿 리터럴 ${} – 현대적 문자열 포맷

6-1 기본 문법 & 다중 행

const name = "길동";
const msg = `안녕하세요, ${name}님!
오늘은 ${new Date().toLocaleDateString("ko-KR")} 입니다.`;
  • 백틱(```) 사용 → 줄바꿈 그대로 유지
  • ${표현식} 안에서는 JS식 아무거나 가능 (삼항·함수 호출 등)

6-2 Tagged Template – 보안·국제화 활용

function i18n(strings, ...values) {
  // strings [0] = 첫 문자열, values = 보간값 배열
  return strings.raw[0] // raw는 이스케이프하지 않은 원본
    .replace("{0}", values[0]);
}
const out = i18n`안녕 {0}!`("길동"); // "안녕 길동!"
  • Tag 함수 로 XSS 필터링 또는 국제화 포맷 구현 가능

7. 유니코드 & 코드 포인트

const smile = "😄";
smile.length; // 2 (서로게이트 쌍)
[...smile].length; // 1 (스프레드로 코드 포인트 세기)
smile.codePointAt(0).toString(16); // "1f604"
String.fromCodePoint(0x1f60a); // 🙂
  • codePointAt : 21비트 코드 포인트 반환 → 이모지 처리 필수
  • ES6 스프레드(...)는 UTF-16쌍을 하나의 요소로 분리 가능

8. 문자열 → 숫자 / 대소문자 변환 유틸

메소드 기능 예시
Number(str) / parseFloat 숫자 변환 Number("3.14")
toUpperCase / toLowerCase 대 · 소문자 "AbC".toLowerCase()
localeCompare 정렬용 비교 (로케일) a.localeCompare(b, "ko")

숫자 앞뒤 공백은 자동 무시, 중간에 문자가 있으면 NaN이 됩니다.

예제 연습 ✍️

// 1. 전화번호 하이픈 삽입
const raw = "01012345678";
const tel = raw.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3");

// 2. HTML 이스케이프 (태그 무력화)
const unsafe = "<script>alert(1)</script>";
const safe = unsafe
  .replaceAll("&", "&amp;")
  .replaceAll("<", "&lt;")
  .replaceAll(">", "&gt;");

// 3. CSV 한 줄 → 객체
const line = "홍길동,30,Seoul";
const [n, a, c] = line.split(",");
const person = { name: n, age: Number(a), city: c };

마무리 핵심 요약

카테고리:

업데이트:

댓글남기기

참고