JavaScript 입문 자료구조

JavaScript 문자열 처리

JavaScript 문자열 처리 — 초급

문자열 처리

1. 도입 (왜 배워야 하는가)

문자열 처리는 프로그래밍에서 매우 중요한 기본 기술입니다. 실무에서 데이터는 흔히 문자열 형식으로 제공되며, 사용자 입력, API로부터의 응답, 데이터베이스의 결과 등 모든 곳에서 문자열을 다루게 됩니다. 만약 문자열 처리 기술이 부족하다면, 데이터를 정확하게 분석하거나 사용자에게 원하는 정보를 제공하는 데 어려움을 겪을 수 있습니다. 예를 들어, 사용자가 입력한 이메일 주소를 검증하는 기능이 없으면 잘못된 형식의 이메일이 저장될 수 있고, 이는 나중에 사용자와의 소통에서 심각한 문제를 일으킬 수 있습니다.

2. 핵심 개념 설명

문자열 (String)

문자열은 문자들의 집합으로, 보통 따옴표(' 또는 ")로 감싸서 표현합니다. 예를 들어, "안녕하세요"는 문자열입니다. 문자열은 텍스트를 저장하고 조작하는 데 사용됩니다.

문자열 메서드

JavaScript에서는 문자열을 처리하기 위해 다양한 메서드를 제공합니다. 여기에는 문자열의 길이를 구하는 length, 특정 문자열을 찾는 indexOf, 문자열을 대문자로 변환하는 toUpperCase 등이 있습니다.

메서드	설명
`length`	문자열의 길이를 반환합니다.
`indexOf`	특정 문자의 위치를 반환합니다.
`toUpperCase`	문자열을 대문자로 변환합니다.
`toLowerCase`	문자열을 소문자로 변환합니다.
`trim`	문자열의 앞뒤 공백을 제거합니다.

실생활 비유

문자열은 책의 내용과 같습니다. 책의 내용을 읽거나, 특정 단어를 찾고, 내용을 요약하거나, 불필요한 부분을 지우는 것처럼 문자열도 여러 방식으로 다룰 수 있습니다.

3. 기본 코드 예제

let greeting = "안녕하세요, 여러분!";  // 문자열 변수 선언
console.log(greeting.length);          // 문자열의 길이를 출력

let position = greeting.indexOf("여러분"); // "여러분"이 문자열에서 위치 찾기
console.log(position);                 // 위치를 출력

let upperCaseGreeting = greeting.toUpperCase(); // 대문자로 변환
console.log(upperCaseGreeting);       // 변환된 문자열 출력

실행 결과:

18
6
안녕하세요, 여러분!

코드 한 줄씩 동작 설명:

greeting 변수에 문자열을 저장합니다.
greeting.length는 문자열의 길이를 계산하여 18을 출력합니다.
indexOf 메서드는 "여러분"의 시작 위치인 6을 반환합니다.
toUpperCase 메서드는 문자열을 모두 대문자로 변환하여 출력합니다.

4. 실전 활용 예제

예제 1: 사용자 입력 검증

쇼핑몰에서 사용자가 입력한 이메일 주소가 올바른 형식인지 검증할 수 있습니다.

function validateEmail(email) {
    return email.includes("@") && email.includes(".");
}

let userEmail = "[email protected]";
console.log(validateEmail(userEmail)); // true

이 코드는 '@'와 '.'가 포함되어 있는지를 체크하여 이메일 유효성을 판단합니다.

예제 2: 장바구니 상품 목록 출력

장바구니에 여러 상품이 있을 때, 상품 이름을 대문자로 변환하여 출력할 수 있습니다.

let cartItems = ["사과", "바나나", "체리"];
let upperCaseItems = cartItems.map(item => item.toUpperCase());
console.log(upperCaseItems); // [ '사과', '바나나', '체리' ]

map

5. 흔한 실수와 주의사항

실수 1: 문자열의 인덱스

문자열의 인덱스는 0부터 시작합니다. 예를 들어, greeting[0]은 "안"을 반환합니다.

잘못된 코드:

    console.log(greeting[1]); // "녕"이 나올 것이라고 생각

올바른 코드:

    console.log(greeting[0]); // "안"

실수 2: 대소문자 구별

JavaScript는 대소문자를 구별합니다. toUpperCase를 호출하지 않으면 대문자로 변환되지 않습니다.

잘못된 코드:

    console.log(greeting.toLowerCase()); // "안녕하세요, 여러분!"

올바른 코드:

    console.log(greeting.toUpperCase()); // "안녕하세요, 여러분!"

6. 정리

문자열은 문자들의 집합으로, 데이터 처리의 기본입니다.
다양한 문자열 메서드를 활용하여 문자열을 조작할 수 있습니다.
문자열의 길이, 특정 문자 찾기, 대문자 변환 등의 기능이 자주 사용됩니다.
다음에 학습하면 좋은 주제는 정규 표현식(Regex)입니다. 이는 문자열 검증 및 복잡한 패턴 매칭에 유용합니다.

학습