JavaScript 문자열 메서드: 초보자를 위한 친절한 가이드

JavaScript에서 문자열은 텍스트 데이터를 다루는 데 필수적입니다. 문자열을 조작하는 다양한 메서드가 있는데, 이번 포스트에서는 초보자도 쉽게 이해할 수 있도록 자주 사용하는 10가지 문자열 메서드를 예제와 함께 친절히 설명하겠습니다. 각 메서드는 실제로 어떻게 쓰이는지, 어떤 상황에서 유용한지 알아볼게요!

---

1. .length – 문자열 길이 구하기

문자열의 길이를 알고 싶을 때 .length를 사용합니다. 이건 메서드가 아니라 속성이라서 괄호 ()를 붙이지 않아요.

사용법

const text = "Hello, World!";
console.log(text.length); // 13

특징

• 공백과 특수문자도 포함해서 셉니다.
• 빈 문자열은 길이가 0이에요.

예제

const name = "Grok";
console.log(name.length); // 4

const empty = "";
console.log(empty.length); // 0

---

2. .toUpperCase() – 대문자로 변환

문자열을 모두 대문자로 바꾸고 싶을 때 사용합니다. 원래 문자열은 바뀌지 않고, 새로운 문자열을 반환해요.

사용법

const text = "hello";
console.log(text.toUpperCase()); // "HELLO"

특징

• 원본 문자열은 그대로 유지됩니다.
• 영어뿐 아니라 다른 언어의 대문자 변환도 지원해요.

예제

const greeting = "hi, everyone!";
const loudGreeting = greeting.toUpperCase();
console.log(loudGreeting); // "HI, EVERYONE!"
console.log(greeting); // "hi, everyone!" (원본不变)

---

3. .toLowerCase() – 소문자로 변환

문자열을 모두 소문자로 바꿀 때 사용합니다. .toUpperCase()와 비슷하지만 반대로 동작해요.

사용법

const text = "HELLO";
console.log(text.toLowerCase()); // "hello"

예제

const userInput = "JavaScript Is Fun";
console.log(userInput.toLowerCase()); // "javascript is fun"

활용 팁

• 사용자 입력을 비교할 때 대소문자를 무시하고 싶을 때 유용해요.

  const answer = "Yes";
  console.log(answer.toLowerCase() === "yes"); // true
  

---

4. .slice(start, end) – 문자열 자르기

문자열의 일부분을 잘라내고 싶을 때 사용합니다. 시작 인덱스(start)부터 끝 인덱스(end) 직전까지 반환해요.

사용법

const text = "JavaScript";
console.log(text.slice(0, 4)); // "Java"

특징

• end 인덱스는 포함되지 않습니다.
• end를 생략하면 문자열 끝까지 잘라요.
• 음수 인덱스를 사용하면 뒤에서부터 셉니다.

예제

const phrase = "I love coding!";
console.log(phrase.slice(2, 6)); // "love"
console.log(phrase.slice(7)); // "coding!"
console.log(phrase.slice(-7)); // "coding!"

---

5. .substring(start, end) – slice와 비슷하지만…

.slice()와 비슷하게 문자열을 자르지만, 약간의 차이점이 있어요.

사용법

const text = "JavaScript";
console.log(text.substring(0, 4)); // "Java"

.slice()와의 차이

• .substring()은 음수 인덱스를 지원하지 않아요. 음수를 넣으면 0으로 간주합니다.
• start가 end보다 크면 두 값을 바꿔서 처리해요.

예제

const text = "Hello";
console.log(text.substring(1, 3)); // "el"
console.log(text.substring(3, 1)); // "el" (start와 end를 바꿈)
console.log(text.substring(-1, 3)); // "Hel" (음수는 0으로 처리)

언제 사용?

• 음수 인덱스를 사용할 일이 없거나, start와 end 순서가 중요하지 않을 때 쓰면 편리해요.

---

6. .includes("문자열") – 포함 여부 확인

문자열 안에 특정 문자열이 있는지 확인할 때 사용합니다. true 또는 false를 반환해요.

사용법

const text = "I love JavaScript";
console.log(text.includes("Java")); // true
console.log(text.includes("Python")); // false

특징

• 대소문자를 구분합니다.
• 두 번째 인자로 시작 위치를 지정할 수 있어요.

예제

const sentence = "The quick brown fox";
console.log(sentence.includes("quick")); // true
console.log(sentence.includes("QUICK")); // false
console.log(sentence.includes("brown", 10)); // true (10번째부터 검색)

---

7. .indexOf("문자열") – 위치 찾기

문자열에서 특정 문자열이 처음 나타나는 위치(인덱스)를 반환합니다. 없으면 -1을 반환해요.

사용법

const text = "I love JavaScript";
console.log(text.indexOf("Java")); // 7
console.log(text.indexOf("Python")); // -1

특징

• 대소문자를 구분합니다.
• 두 번째 인자로 시작 위치를 지정할 수 있어요.

예제

const phrase = "Java is not JavaScript";
console.log(phrase.indexOf("Java")); // 0
console.log(phrase.indexOf("Java", 1)); // 12

활용 팁

• 문자열이 있는지 확인할 때 .includes() 대신 사용할 수도 있어요.

  if (phrase.indexOf("Java") !== -1) {
    console.log("Java가 포함되어 있어요!");
  }
  

---

8. .trim() – 앞뒤 공백 제거

문자열의 양쪽 끝에 있는 공백(또는 줄바꿈)을 제거합니다.

사용법

const text = "   Hello, World!   ";
console.log(text.trim()); // "Hello, World!"

특징

• 문자열 내부의 공백은 제거되지 않아요.
• 원본 문자열은 바뀌지 않습니다.

예제

const messyInput = "   User Input   ";
console.log(messyInput.trim()); // "User Input"
console.log(messyInput); // "   User Input   "

활용 팁

• 사용자 입력을 처리할 때 공백을 정리하는 데 유용해요.

---

9. .replace("기존", "새값") – 문자열 교체

문자열에서 특정 부분을 다른 문자열로 바꿉니다. 기본적으로 첫 번째로 찾은 부분만 바꿔요.

사용법

const text = "I like Java";
console.log(text.replace("Java", "JavaScript")); // "I like JavaScript"

특징

• 대소문자를 구분합니다.
• 모든 부분을 바꾸고 싶다면 정규표현식(/문자열/g)을 사용하세요.

예제

const sentence = "Java is fun, Java is great!";
console.log(sentence.replace("Java", "Python")); // "Python is fun, Java is great!"
console.log(sentence.replace(/Java/g, "Python")); // "Python is fun, Python is great!"

---

10. .split("기준문자") – 나누기 (배열로 반환)

문자열을 특정 문자를 기준으로 나눠 배열로 반환합니다.

사용법

const text = "apple,banana,orange";
console.log(text.split(",")); // ["apple", "banana", "orange"]

특징

• 기준 문자를 생략하면 문자열 전체가 배열의 한 요소로 들어갑니다.
• 빈 문자열을 나누면 빈 배열이 반환됩니다.

예제

const sentence = "I love to code";
console.log(sentence.split(" ")); // ["I", "love", "to", "code"]
console.log(sentence.split("")); // ["I", " ", "l", "o", "v", "e", ...]
console.log(sentence.split()); // ["I love to code"]

활용 팁

• CSV 데이터나 사용자 입력을 처리할 때 자주 사용됩니다.

---