자바 스크립트의 String

1. 문자열이란? 

정의 및 특징:

• 문자열(String)은 문자들의 순서 있는 모음으로 이루어진 자료형입니다.
• 작은따옴표(' '), 큰따옴표(" "), 또는 백틱(`)으로 감싸서 표현할 수 있습니다.
• 백틱(`)을 사용한 방식을 템플릿 리터럴(Template Literal)이라고 하며, 여러 줄 문자열 작성 및 문자열 내 변수/표현식 삽입(${...})이 용이합니다.
• let name = "개발자"; let message = 안녕하세요, ${name}님! 오늘도 즐거운 코딩하세요!; console.log(message);

가장 중요한 특징: 불변성(Immutability) immutable 
JavaScript 문자열은 불변(immutable)합니다. 즉, 한 번 만들어진 문자열은 그 내용을 직접 수정할 수 없습니다. 문자열을 변경하려면 항상 새로운 문자열을 만들어야 합니다.

2. 문자열 생성과 초기화

• 리터럴 할당: 가장 흔한 방법! 따옴표나 백틱으로 값을 직접 할당합니다.

const greeting = "Hello!"; const lang = 'JavaScript';

• String() 함수 사용: 다른 타입의 값을 문자열로 명시적으로 변환할 때 사용합니다. 

const year = 2025;
const yearStr = String(year); // 숫자 2025 ->문자열 "2025"
console.log(yearStr); // 출력: "2025"
console.log(typeof yearStr); // 출력: "string"

• 빈 문자열: 값이 없는 문자열도 가능합니다.

const empty = "";

 

3. 인덱싱과 불변성

인덱싱: 한 글자씩 접근하기

문자열의 각 문자는 0부터 시작하는 인덱스를 가집니다. 대괄호([])로 접근할 수 있어요.

const text = "Code";
console.log(text[0]); // 출력: C
console.log(text[1]); // 출력: o
console.log(text.length); // 출력: 4

 

• charAt(index) 메서드도 같은 역할을 합니다.

console.log(text.charAt(0)); // 출력: C

 

• 없는 인덱스에 접근하면?

대괄호 []: undefined 반환
charAt(): 빈 문자열 "" 반환
const text = "JavaScript";
console.log(text[10]); // 출력: undefined
console.log(text.charAt(10)); // 출력: ""

 

 

값 수정? (불가능!)

• 다시 한번 강조! 문자열은 불변(immutable)합니다. 인덱스로 접근해서 값을 바꾸려고 해도 바뀌지 않아요.

let myStr = "abc";
myStr[0] = "d"; // 시도해도 오류가 나거나 조용히 무시됨
console.log(myStr); // 출력: abc (그대로!)

 

 

• 값을 바꾸려면, 기존 문자열을 조작해서 새로운 문자열을 만들어야 합니다.

let myStr = "abc";
myStr = "d" + myStr.slice(1); // 'd'와 'bc'를 합쳐 새 문자열 생성
console.log(myStr); // 출력: dbc

---

4. 주요 메서드 

JavaScript는 문자열을 다루는 편리한 메서드를 많이 제공합니다.

---

slice(startIndex, [endIndex]) - 원하는 부분만 싹둑!

• 문자열의 일부를 추출하여 새 문자열로 반환합니다.
• startIndex: 추출 시작 위치 (포함)
• endIndex (선택 사항): 추출 끝 위치 (미포함, 생략 시 끝까지)
• 음수 인덱스도 가능해요! const message = "JavaScript is fun!";
• console.log(message.slice(11)); // 출력: "is fun!"
• console.log(message.slice(0, 10)); // 출력: "JavaScript"
• console.log(message.slice(-4)); // 출력: "fun!" 반환값: String (추출된 새 문자열) 원본 변경: No

---

toUpperCase() / toLowerCase() - 대소문자 변신!

• toUpperCase(): 모든 알파벳을 대문자로!
• toLowerCase(): 모든 알파벳을 소문자로!
• const mixedCase = "Hello World";
• console.log(mixedCase.toUpperCase()); // 출력: "HELLO WORLD"
• console.log(mixedCase.toLowerCase()); // 출력: "hello world" 반환값: String (변환된 새 문자열) 원본 변경: No

---

trim() / trimStart() / trimEnd() - 깔끔하게 공백 제거!

• trim(): 양쪽 끝 공백(스페이스, 탭, 줄바꿈 등) 제거.
• trimStart() (또는 trimLeft()): 시작(왼쪽) 공백 제거.
• trimEnd() (또는 trimRight()): 끝(오른쪽) 공백 제거.
• const padded = " Look at this! ";
• console.log('${padded.trim()}'); // 출력: "'Look at this!'"
• console.log('${padded.trimStart()}'); // 출력: "'Look at this! '"
• console.log('${padded.trimEnd()}'); // 출력: "' Look at this!'" 반환값: String (공백 제거된 새 문자열) 원본 변경: No

---

replace(searchValue, newValue) / replaceAll(searchValue, newValue) - 찾아서 바꾸기!

• replace(): searchValue를 찾아 newValue로 바꾼 새 문자열 반환. 기본적으로 첫 번째 일치 항목만.
• replaceAll() (ES2021): 모든 일치 항목을 바꿉니다.
• const phrase = "apple banana apple";
• console.log(phrase.replace("apple", "orange")); // 출력: "orange banana apple" console.log(phrase.replaceAll("apple", "orange")); // 출력: "orange banana orange" 반환값: String (대체된 새 문자열) 원본 변경: No

---

split([separator]) - 기준점 맞춰 나누기! (배열 반환)

• 문자열을 separator 기준으로 나누어 새로운 배열로 만들어 반환합니다.
• const tags = "javascript,react,node";
• console.log(tags.split(",")); // 출력: ["javascript", "react", "node"]
• const sentence = "I love coding"; console.log(sentence.split(" ")); // 출력: ["I", "love", "coding"]
• const word = "HELLO"; console.log(word.split("")); // 출력: ["H", "E", "L", "L", "O"] 반환값: Array (나눠진 문자열들의 배열) 원본 변경: No

• 💡 실전 활용: 입력 값 처리 (Node.js) 코딩 테스트 등에서 공백으로 구분된 여러 입력을 받을 때 아주 유용합니다.
• // 입력 예시: 10 20
• const fs = require("fs");
• let input = fs.readFileSync(0).toString().trim(); // "10 20"
• const parts = input.split(" "); // ["10", "20"]
• const num1 = Number(parts[0]); // 10
• const num2 = Number(parts[1]); // 20
• console.log(num1 + num2); // 출력: 30

---

 

indexOf(searchValue, [fromIndex]) - 어디있니? 위치 찾기! (인덱스 반환)

• 문자열 내에서 searchValue가 처음 나타나는 위치의 인덱스를 반환합니다.
• 찾는 내용이 없으면 -1을 반환합니다.
• const phrase = "Learning JavaScript is fun!";
• console.log(phrase.indexOf("JavaScript")); // 출력: 9
• console.log(phrase.indexOf("a")); // 출력: 1
• console.log(phrase.indexOf("a", 5)); // 출력: 10
• console.log(phrase.indexOf("Python")); // 출력: -1 반환값: Number (찾은 인덱스 또는 -1) 원본 변경: No

---

5. 특수 문자 (Escape Characters) escapesequence

문자열 안에 줄바꿈이나 탭, 또는 따옴표 자체를 넣고 싶을 때 이스케이프 시퀀스를 사용합니다. 백슬래시()와 특정 문자를 조합합니다.

주요 특수 문자:

• \n : 줄 바꿈 (New Line)
• \t : 수평 탭 (Tab)
• \ : 백슬래시 \ 문자 자체
• ' : 작은따옴표 ' 문자 자체
• " : 큰따옴표 " 문자 자체

예시:

// 줄 바꿈

const multilineStr = "안녕하세요.\nJavaScript를 배워봅시다.";

console.log(multilineStr);

/* 출력:

안녕하세요.

JavaScript를 배워봅시다.

*/

 

// 탭
const tabStr = "이름\t나이";
console.log(tabStr); // 출력: 이름    나이

// 백슬래시
const path = "C:\\Users\\Public";
console.log(path); // 출력: C:\Users\Public

// 따옴표
const quote1 = '그는 말했다, \'안녕!\'';
const quote2 = "그녀는 말했다, \"반가워!\"";
console.log(quote1); // 출력: 그는 말했다, '안녕!'
console.log(quote2); // 출력: 그녀는 말했다, "반가워!"

따옴표 사용 꿀팁: 문자열을 감싸는 따옴표와 다른 종류의 따옴표를 내부에서 사용하면, 이스케이프 문자를 쓰지 않아도 됩니다! console.log("따옴표 안에 '작은따옴표' 넣기");

console.log('따옴표 안에 "큰따옴표" 넣기');

---

6. 마무리 정리 

• 문자열은 문자들의 순서 있는 집합이며, '', "", `` 로 표현됩니다.
• JavaScript 문자열은 불변(Immutable)합니다. (수정 시 새 문자열 생성)
• 인덱스 ([ ] 또는 charAt())로 개별 문자에 접근할 수 있습니다.
• 다양한 내장 메서드(slice, replace, split, trim, toUpperCase 등)를 활용하여 문자열을 효과적으로 다룰 수 있습니다.
• 이스케이프 시퀀스(\n, \t 등)를 사용하여 특수 문자를 표현합니다.
• 템플릿 리터럴 (...${}...)은 문자열 작성과 변수 삽입을 매우 편리하게 해줍니다.