자바스크립트 문자열(String)의 모든 것

 

문자열의 기본 특성

JavaScript에서 문자열은 원시 타입 중 하나이며, 변경 불가능(immutable) 합니다. 즉, 한 번 생성된 문자열을 직접 수정할 수 없고, 수정된 '새로운 문자열'을 만들어서 반환합니다.

 

String 객체와 원시 문자열

원시 문자열(primitive string)

let str = "Hello";

이는 JS 엔진 내부적으로 문자열 리터럴을 저장하며, 상수 풀(String pool)에 캐싱될 수도 있습니다.

String 객체

let objStr = new String("Hello");

이는 래퍼(wrapper) 객체입니다. 원시 문자열에 대해 객체 형태의 프로퍼티와 메서드를 사용할 때 내부적으로 임시 String 객체로 감싸주지만, 가급적 직접 new String(...) 방식보다는 원시 문자열 리터럴을 사용하는 것이 권장됩니다.

• 타입 혼동(Type Confusion)
  • String 객체는 typeof 연산자로 검사할 때 object로 반환됩니다.
  • 반면 원시 문자열은 typeof로 string을 반환합니다.
  • 문제점 : == 비교는 같다고 판단할 수 있지만, ===는 타입이 다르기 때문에 false가 됩니다. 이는 의도치 않은 버그를 유발할 가능성이 있습니다.
• 불필요한 메모리 및 성능 문제
  • String 객체를 생성하면, 내부적으로 더 많은 메모리를 소비하며, 실제로는 간단한 텍스트 조작을 위해 불필요한 오버헤드가 발생합니다.
  • 원시 문자열은 필요한 경우, 자동으로 임시 String 객체로 래핑되기 때문에 굳이 명시적으로 new String()을 호출할 필요가 없습니다.
• API 호환성 및 예상치 못한 동작
  • new String("")은 객체이기 때문에 비어 있어도 truthy로 평가됩니다.
  • 반면 ""(빈 문자열)은 falsy입니다.
  • 따라서 if (str) 같은 조건문에서 String 객체는 항상 true로 평가됩니다.

function checkString(str) {
  if (str) {
    console.log("String is not empty");
  }
}

checkString(new String(""));  // "String is not empty" (비어 있음에도 불구하고 실행됨)
checkString("");              // 아무것도 출력되지 않음 (정상 동작)

 

문자열과 배열의 유사점과 차이점

문자열도 인덱스로 각 문자를 접근할 수 있어 배열처럼 보이지만(str[0]), 실제로는 불변이고. length 이외에 배열에서 제공하는 여러 메서드(push, pop, splice 등)는 사용할 수 없습니다.

 

for...of 문을 이용해 문자열의 각 문자를 순회할 수 있습니다.

let str = "ABC";
for (let ch of str) {
  console.log(ch);
}
// A
// B
// C

 

---

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

문자열 리터럴(Literal)

• 작은따옴표 ' '
• 큰따옴표 " "
• 백틱(ES6 템플릿 리터럴) `

let single = 'Hello';
let double = "Hello";
let backtick = `Hello`;

 

템플릿 리터럴(Template Literal)

ES6에서 도입된 문법으로, 표현식 삽입과 여러 줄 문자열을 간편하게 작성할 수 있습니다.

let name = "John";
let greeting = `Hello, ${name}!
Welcome to JavaScript.`;

또한 태그드 템플릿(Tagged Template) 기능을 이용하면, 템플릿 리터럴 내부의 문자열과 표현식을 분리해 특별한 처리를 할 수도 있습니다.

function highlight(strings, ...values) {
  // strings: ['My name is ', ' and I am ', ' years old.']
  // values: ['John', 20]
  return strings.reduce((acc, str, i) => {
    return acc + str + (values[i] ? `<strong>${values[i]}</strong>` : "");
  }, "");
}

let name2 = "John";
let age = 20;
let result = highlight`My name is ${name2} and I am ${age} years old.`;
console.log(result);
// My name is <strong>John</strong> and I am <strong>20</strong> years old.

 

---

문자열 메서드 총정리

검색 / 판별

메서드	설명
indexOf(substr)	문자열 substr를 찾고, 첫 번째 인덱스를 반환 (없으면 -1)
lastIndexOf(substr)	문자열 substr를 뒤에서부터 찾고, 인덱스를 반환 (없으면 -1)
includes(substr)	문자열에 substr가 포함되어 있는지 여부 (true/false)
startsWith(substr)	문자열이 substr로 시작하는지 여부 (true/false)
endsWith(substr)	문자열이 substr로 끝나는지 여부 (true/false)
search(regexp)	정규 표현식 regexp에 매칭되는 첫 번째 인덱스 반환 (없으면 -1)
match(regexp)	정규 표현식 regexp와 매칭되는 결과(배열 혹은 null) 반환
matchAll(regexp)	정규 표현식 regexp에 매칭되는 모든 결과(이터레이터) 반환 (ES2020)

matchAll 예시

let str = "test1test2";
let regexp = /t(e)(s)(t)/g;
let matches = str.matchAll(regexp);

for (let match of matches) {
  console.log(match);
  // 예: ["test", "e", "s", "t", index: 0, input: "test1test2", groups: undefined]
  //     ["test", "e", "s", "t", index: 5, input: "test1test2", groups: undefined]
}

 

추출

메서드	설명
charAt(index)	해당 인덱스 위치의 문자 반환 (인덱스 벗어나면 빈 문자열 반환)
charCodeAt(index)	해당 인덱스 위치 문자의 UTF-16 코드 유닛 값(0–65535 사이 정수) 반환
codePointAt(index)	UTF-16이 아닌 유니코드 코드 포인트(서로게이트 문자 포함)에 안전하게 접근 가능 (ES6)
slice(start, end)	문자열의 일부를 추출해 새 문자열 반환 (음수 인덱스 가능)
substring(start, end)	start와 end 사이의 문자열을 반환 (음수는 0으로 처리)
substr(start, length)	start부터 length 길이만큼 반환 (현재는 비추천 Deprecated)

let str = "JavaScript 💖";
console.log(str.charAt(4));        // S
console.log(str.slice(0, 4));      // Java
console.log(str.substring(4, 10)); // Script
console.log(str.codePointAt(11));  // 💖의 유니코드 코드 포인트

substr()는 과거부터 사용되어 왔지만, 현대는 Deprecated 상태이므로 가능한 slice()나 substring()을 사용하시는 것이 좋습니다.

 

변환

메서드	설명
toUpperCase()	모두 대문자로 변환
toLowerCase()	모두 소문자로 변환
toLocaleUpperCase()	지역화(로케일)에 맞춰 대문자로 변환 (예: 터키어 i → İ)
toLocaleLowerCase()	지역화(로케일)에 맞춰 소문자로 변환
normalize(form)	유니코드 정규화 (NFC, NFD, NFKC, NFKD 등)

// 예: 한글 “가”는 유니코드 U+AC00, 또는 자모를 결합한 형태로도 표현 가능
let str1 = "가";
let str2 = "\u1100\u1161"; // ㄱ + ㅏ 조합
console.log(str1 === str2);             // false, 다른 코드 포인트 시퀀스
console.log(str1.normalize() === str2.normalize()); // true

 

조작

메서드	설명
replace(찾을값, 바꿀값)	첫 번째로 일치하는 패턴만 바꿔서 새 문자열 반환. 정규 표현식 가능
replaceAll(찾을값, 바꿀값)	일치하는 모든 패턴을 바꿔서 새 문자열 반환 (ES2021)
trim()	양쪽 공백(개행 문자 포함) 제거
trimStart() / trimEnd()	문자열 앞/뒤 공백만 제거 (이전 이름은 trimLeft(), trimRight())
padStart(targetLength, padStr)	문자열 길이가 targetLength가 될 때까지 앞쪽에 padStr를 반복해서 붙인 새 문자열 반환
padEnd(targetLength, padStr)	문자열 길이가 targetLength가 될 때까지 뒤쪽에 padStr를 반복해서 붙인 새 문자열 반환

let str = "  Hello JavaScript!  ";

console.log(str.replace("Java", "Type"));   //  "  Hello TypeScript!  "
console.log(str.replaceAll(" ", "*"));      // "**Hello*JavaScript!**"
console.log(str.trim());                    // "Hello JavaScript!"
console.log(str.padStart(25, "*"));         // "*****  Hello JavaScript!"

 

분리 / 결합 / 반복

메서드	설명
split(separator)	separator로 분리하여 배열 반환
concat(...strs)	여러 문자열을 결합해 새 문자열 반환
repeat(count)	문자열을 count번 반복해 이어붙인 새 문자열 반환
localeCompare()	현재 문자열과 인자로 받은 문자열을 비교하여 -1, 0, 1로 결과 반환 (정렬 시 유용)

let fruit = "apple,orange,banana";

console.log(fruit.split(","));       // ['apple', 'orange', 'banana']
console.log("Hello".concat(" World!")); // "Hello World!"
console.log("hi ".repeat(3));        // "hi hi hi "
console.log("b".localeCompare("a")); // 1 (사전순으로 b > a)

 

---

고급 주제

서로게이트 쌍(Surrogate Pair)와 이모지(Emoji) 다루기

JS 문자열은 내부적으로 UTF-16 코드 유닛(0 ~ 65536) 기반으로 관리합니다. 유니코드가 65535(0xFFFF) 범위를 넘는 문자(예: 이모지, 일부 한자)는 서로게이트 쌍(Surrogate Pair)으로 표현됩니다. 따라서 길이가 2인 문자도 있고, charAt과 charCodeAt만으로는 제대로 처리하기 어려울 수 있습니다. ES6 이후 제공되는 codePointAt, fromCodePoint 메서드를 사용하면 비교적 안전하게 이모지 등을 다룰 수 있습니다.

let smile = "😊";
console.log(smile.length);         // 2, 서로게이트 쌍
console.log(smile.charAt(0));      // � (깨진 문자)
console.log(smile.codePointAt(0)); // 128522 (UTF-32 코드 포인트)

// 문자열 생성
let heart = String.fromCodePoint(0x1F49C);
console.log(heart);                // 💜

 

정규 표현식(Regular Expression)과 함께 쓰기

문자열 검색, 치환, 추출 등을 정규 표현식과 함께 사용하면 더 강력합니다. match, matchAll, search, replace, replaceAll, split 등에서 정규 표현식을 사용할 수 있습니다.

let text = "123-456-7890";
let result = text.replace(/\D/g, ""); // 숫자 이외(\D)를 모두 제거
console.log(result); // "1234567890"

 

국제화(i18n)와 지역화(l10n)

문자열을 비교하거나 대소문자로 변환할 때, 언어와 문화권(로케일, locale)에 따라 결과가 달라질 수 있습니다. toLocaleUpperCase(locale), toLocaleLowerCase(locale), localeCompare(locale, options) 등을 적절히 활용하면 정확한 정렬, 비교, 변환이 가능합니다.

let turkishI = "ı"; // 터키 소문자
console.log(turkishI.toUpperCase());             // I (영문)
console.log(turkishI.toLocaleUpperCase("tr-TR"));// İ (터키 문자)

 

성능과 메모리

문자열은 불변이므로, 많은 수의 문자열을 조합하거나 잘라낼 때, 잦은 새 문자열 생성은 비용이 커질 수 있습니다. 대량의 문자열을 다룰 때는 배열에 담아 두었다가 최종적으로 join으로 합치는 방식을 자주 사용합니다. (예: 로그 누적, 긴 HTML 문자열 작성)

let builder = [];
for (let i = 0; i < 1000; i++) {
  builder.push(`Line ${i}`);
}
let finalStr = builder.join("\n");

 

---

마무리

정리하자면, JavaScript의 String(원시 문자열)은 다루기 쉽고 강력한 기능을 제공하지만, 불변 구조, 유니코드 이슈, 정규 표현식 활용 같은 세부 사항을 잘 이해해야 버그 없이 안정적으로 사용할 수 있습니다. 위 내용을 토대로 다양한 문자열 처리 상황에 맞춰 적절히 활용해 보세요.