문자열 다루기

🎯 학습 목표

이 강을 마치면 다음을 할 수 있습니다.

• 템플릿 리터럴을 활용해 복잡한 문자열을 가독성 있게 작성할 수 있습니다.
• length, indexOf, includes, slice, split, join, replace, trim, toUpperCase 등 핵심 문자열 메서드를 올바르게 사용할 수 있습니다.
• 문자열 메서드를 조합해 실전에서 마주치는 텍스트 처리 문제를 해결할 수 있습니다.

💬 문자열 생성과 템플릿 리터럴 심화

이 섹션에서는 이미 배운 문자열 생성 방법을 복습하고, 템플릿 리터럴의 강력한 기능을 더 깊이 살펴보겠습니다.

4강에서 문자열을 만드는 세 가지 방법(작은따옴표, 큰따옴표, 백틱)을 배웠습니다. 이 중 템플릿 리터럴(Template Literal)은 단순히 변수를 삽입하는 것 이상의 기능을 제공합니다.

// 기본 변수 삽입
const name = "홍길동";
const age = 25;
console.log(`이름: ${name}, 나이: ${age}세`);
// 이름: 홍길동, 나이: 25세

// 표현식 삽입 — ${} 안에 어떤 표현식도 가능
const price = 15000;
const discount = 0.1;
console.log(`정가: ${price}원, 할인가: ${price * (1 - discount)}원`);
// 정가: 15000원, 할인가: 13500원

// 삼항 연산자와 결합
const score = 85;
console.log(`점수: ${score}점 (${score >= 60 ? "합격" : "불합격"})`);
// 점수: 85점 (합격)

// 여러 줄 문자열
const message = `안녕하세요!
오늘 날씨가 좋네요.
즐거운 하루 되세요.`;
console.log(message);

// 함수 호출도 삽입 가능
const today = new Date();
console.log(`오늘은 ${today.getFullYear()}년 ${today.getMonth() + 1}월입니다.`);

${} 안에는 단순 변수뿐만 아니라 어떤 자바스크립트 표현식도 들어갈 수 있습니다. 계산식, 조건 표현(삼항 연산자), 함수 호출, 심지어 또 다른 템플릿 리터럴도 중첩할 수 있습니다. 이 유연성 덕분에 복잡한 문자열을 만들 때 코드가 훨씬 읽기 쉬워집니다. 삼항 연산자는 7강에서 자세히 배우지만, 조건 ? 참일 때 값 : 거짓일 때 값의 형식으로 이해하면 됩니다.

📏 기본 속성과 접근

이 섹션에서는 문자열의 길이를 확인하고 특정 위치의 글자에 접근하는 방법을 살펴보겠습니다.

문자열은 글자들의 순서 있는 나열입니다. 각 글자는 인덱스(Index)라는 순서 번호를 가집니다. 자바스크립트에서 인덱스는 항상 0부터 시작합니다. 첫 번째 글자가 인덱스 0, 두 번째가 1, 이런 식으로 이어집니다.

const str = "Hello";
//           01234  ← 인덱스

// 길이 확인
console.log(str.length);  // 5

// 인덱스로 글자 접근
console.log(str[0]);   // "H" — 첫 번째 글자
console.log(str[4]);   // "o" — 다섯 번째 글자
console.log(str[10]);  // undefined — 범위 초과 시

// at() 메서드 — 음수 인덱스로 뒤에서 접근 (ES2022)
console.log(str.at(-1));  // "o" — 마지막 글자
console.log(str.at(-2));  // "l" — 뒤에서 두 번째

// 한국어 문자열의 길이
const korean = "안녕하세요";
console.log(korean.length);  // 5 — 글자 수
console.log(korean[0]);      // "안"

length는 문자열에서 가장 자주 사용하는 속성입니다. 메서드(함수)가 아니라 속성이므로 괄호 없이 str.length로 접근합니다. 인덱스 접근 시 범위를 벗어나면 undefined가 반환됩니다. at() 메서드는 뒤에서부터 접근하는 음수 인덱스를 지원하는 현대적인 방법으로, 마지막 글자를 가져올 때 str[str.length - 1] 대신 str.at(-1)로 간결하게 쓸 수 있습니다.

🔎 검색 메서드

이 섹션에서는 문자열 안에서 특정 텍스트를 찾는 다양한 메서드를 살펴보겠습니다.

문자열에서 특정 단어나 글자가 있는지 확인하거나, 어떤 위치에 있는지 찾는 작업은 매우 자주 발생합니다. 이메일 주소 형식 확인, 검색 기능 구현, 특정 패턴 포함 여부 검사 등이 대표적인 예입니다.

const sentence = "자바스크립트는 웹을 움직이는 언어입니다.";

// indexOf() — 찾는 문자열의 시작 인덱스 반환, 없으면 -1
console.log(sentence.indexOf("웹"));         // 8
console.log(sentence.indexOf("파이썬"));      // -1 (없음)
console.log(sentence.indexOf("는", 5));       // 16 (5번 인덱스부터 검색)

// includes() — 포함 여부를 true/false로 반환
console.log(sentence.includes("웹"));         // true
console.log(sentence.includes("파이썬"));      // false

// startsWith() / endsWith() — 시작/끝 문자열 확인
const email = "user@example.com";
console.log(email.startsWith("user"));   // true
console.log(email.endsWith(".com"));     // true
console.log(email.endsWith(".kr"));      // false

// 실전 활용: 이메일 형식 간단 검증
const hasAt = email.includes("@");
const hasDot = email.includes(".");
console.log(hasAt && hasDot);  // true — 기본 형식 검사

현대 코드에서는 indexOf보다 includes를 더 선호합니다. 포함 여부만 알면 될 때는 includes가 의도를 더 명확하게 표현하기 때문입니다. indexOf는 위치 정보가 필요할 때 사용합니다. startsWith와 endsWith는 파일 확장자 확인, URL 패턴 검사 등에 매우 유용합니다.

✂️ 추출과 변환 메서드

이 섹션에서는 문자열의 일부를 잘라내거나, 분리하거나, 대소문자를 바꾸는 핵심 메서드들을 살펴보겠습니다.

문자열 처리의 핵심은 원하는 부분을 정확히 추출하고 가공하는 것입니다. 자바스크립트는 이를 위한 강력한 메서드를 제공합니다.

const text = "Hello, World!";

// slice(시작, 끝) — 시작 인덱스부터 끝 인덱스 전까지 추출
console.log(text.slice(0, 5));   // "Hello"
console.log(text.slice(7));      // "World!" — 끝 생략 시 끝까지
console.log(text.slice(-6));     // "World!" — 음수: 뒤에서부터
console.log(text.slice(7, 12));  // "World"

// substring(시작, 끝) — slice와 유사하지만 음수 인덱스 미지원
console.log(text.substring(0, 5));  // "Hello"
// 실무에서는 slice 권장

// toUpperCase() / toLowerCase() — 대소문자 변환
console.log(text.toUpperCase());  // "HELLO, WORLD!"
console.log(text.toLowerCase());  // "hello, world!"

// 실전 예시: 대소문자 구분 없이 비교
const input = "JAVASCRIPT";
const keyword = "javascript";
console.log(input.toLowerCase() === keyword.toLowerCase());  // true

slice()는 문자열의 일부를 잘라내는 가장 유연한 메서드입니다. 두 번째 인수(끝 인덱스)는 해당 위치를 포함하지 않습니다. 음수 인덱스를 지원하므로 slice(-6)은 뒤에서 6번째부터 끝까지를 의미합니다. 대소문자 변환은 사용자 입력을 처리할 때 특히 중요합니다. 검색 기능을 구현할 때 입력값과 데이터를 모두 소문자로 변환하면 대소문자 구분 없이 비교할 수 있습니다.

// split() — 구분자 기준으로 배열로 분리
const csv = "사과,바나나,포도,딸기";
const fruits = csv.split(",");
console.log(fruits);          // ["사과", "바나나", "포도", "딸기"]
console.log(fruits[0]);       // "사과"
console.log(fruits.length);   // 4

// 문장을 단어로 분리
const sentence = "자바스크립트를 배우는 중입니다";
const words = sentence.split(" ");
console.log(words);  // ["자바스크립트를", "배우는", "중입니다"]

// 빈 문자열로 분리하면 글자 단위 배열
const chars = "hello".split("");
console.log(chars);  // ["h", "e", "l", "l", "o"]

// join() — 배열을 문자열로 합치기 (split의 반대)
const joined = fruits.join(" / ");
console.log(joined);  // "사과 / 바나나 / 포도 / 딸기"

split()은 문자열을 배열로 변환하고, join()은 배열을 문자열로 변환합니다. 이 두 메서드는 짝을 이루는 경우가 많습니다. CSV 파일 파싱, URL 경로 분석, 태그 목록 처리 등 실무에서 매우 자주 사용합니다. 배열은 11강에서 자세히 배우지만, split()의 결과를 배열로 이해하는 것은 지금도 충분합니다.

// replace() — 첫 번째 일치 항목만 교체
const original = "I like cats. Cats are cute.";
console.log(original.replace("cats", "dogs"));  // "I like dogs. Cats are cute."
// 첫 번째 "cats"만 교체됨 (대소문자 구분)

// replaceAll() — 모든 일치 항목 교체 (ES2021)
console.log(original.replaceAll("cats", "dogs"));
// "I like dogs. Cats are cute." (대소문자 구분으로 "Cats"는 미교체)

// trim() — 양쪽 공백 제거 (사용자 입력 처리에 필수!)
const userInput = "   홍길동   ";
console.log(userInput.trim());        // "홍길동"
console.log(userInput.trimStart());   // "홍길동   " — 앞쪽만
console.log(userInput.trimEnd());     // "   홍길동" — 뒤쪽만

// repeat() — 문자열 반복
console.log("★".repeat(5));  // "★★★★★"

// padStart() / padEnd() — 길이 맞추기
console.log("7".padStart(3, "0"));   // "007" — 왼쪽에 0 채우기
console.log("7".padEnd(3, "0"));     // "700" — 오른쪽에 0 채우기

trim()은 사용자 입력을 처리할 때 절대 빠뜨릴 수 없는 메서드입니다. 사용자가 폼에 이름을 입력할 때 앞뒤에 실수로 공백을 넣는 경우가 많습니다. trim()으로 공백을 제거하지 않으면 "홍길동"과 " 홍길동 "이 다른 값으로 처리되는 문제가 발생합니다. padStart()는 주문번호나 날짜를 일정한 길이로 맞출 때 유용합니다. 예를 들어 월을 항상 두 자리로 표현할 때 "1".padStart(2, "0")처럼 사용합니다.

⚠️ 자주 하는 실수와 주의점

이 섹션에서는 문자열 처리 시 입문자들이 자주 겪는 실수와 주의할 점을 살펴보겠습니다.

문자열 메서드는 원본을 바꾸지 않습니다. 4강에서 배운 것처럼 문자열은 불변입니다. 모든 문자열 메서드는 새로운 문자열을 반환하고 원본은 그대로 유지됩니다. 따라서 결과를 사용하려면 반드시 변수에 저장해야 합니다.

let name = "  홍길동  ";
name.trim();  // ❌ 반환값을 사용하지 않아 원본 그대로
console.log(name);  // "  홍길동  " — 변하지 않음!

name = name.trim();  // ✅ 결과를 다시 대입
console.log(name);  // "홍길동"

slice의 끝 인덱스는 포함하지 않습니다. "Hello".slice(0, 5)는 인덱스 0, 1, 2, 3, 4의 글자를 반환합니다. 인덱스 5는 포함되지 않습니다. 처음에 헷갈릴 수 있으니 콘솔에서 직접 실습해 확인하는 것이 좋습니다.

숫자를 문자열처럼 다루는 실수도 주의해야 합니다. 사용자 입력이나 폼에서 받은 데이터는 항상 문자열입니다. 숫자처럼 보여도 "42"입니다. 계산에 사용하려면 Number()로 변환해야 하고, 문자열 메서드를 사용하려면 .toString()이나 String()으로 변환해야 합니다. 이 구분을 잊으면 "10" + "20" = "1020"과 같은 오류가 발생합니다.

📝 핵심 요약

6강에서 배운 주요 문자열 메서드를 정리해 보겠습니다.

메서드	설명	예시
length	문자열 길이	"hello".length → 5
indexOf(str)	위치 반환, 없으면 -1	"hello".indexOf("l") → 2
includes(str)	포함 여부 boolean	"hello".includes("ell") → true
startsWith / endsWith	시작/끝 확인	"test.js".endsWith(".js") → true
slice(s, e)	부분 문자열 추출	"hello".slice(1, 3) → "el"
toUpperCase / toLowerCase	대소문자 변환	"Hello".toLowerCase() → "hello"
split(sep)	배열로 분리	"a,b,c".split(",") → ["a","b","c"]
replace(old, new)	첫 항목 교체	"aaa".replace("a","b") → "baa"
trim()	앞뒤 공백 제거	" hi ".trim() → "hi"
padStart(n, str)	왼쪽 채우기	"7".padStart(3,"0") → "007"

다음 강인 7강 — 조건문에서는 프로그램의 흐름을 제어하는 if, else if, else, 그리고 여러 경우를 처리하는 switch문을 배웁니다. 4강에서 배운 Truthy/Falsy, 5강의 비교 연산자, 그리고 오늘 배운 문자열 처리가 모두 조건문과 합쳐지면서 진짜 동적인 로직을 만들기 시작합니다!