[JS String] 흔한 오해 해소: 불변성과 Template Literals 활용법

JavaScript에서 String 객체는 텍스트 데이터를 다룰 때 필수적이죠. 하지만 사용하다 보면 몇 가지 흔한 문제에 부딪힐 수 있어요.

JavaScript의 문자열은 한 번 생성되면 그 내용을 변경할 수 없습니다. 문자열 메서드는 새로운 문자열을 반환합니다.

문제
문자열 메서드를 사용했지만 원본 변수의 값이 바뀌지 않는다고 생각할 때.

해결
메서드의 반환 값을 새로운 변수에 할당하거나, 기존 변수에 다시 할당해야 합니다.

덧셈 (+) 연산자를 사용할 때, 피연산자 중 하나가 문자열이면 나머지 피연산자도 문자열로 변환되어 문자열 연결이 일어납니다.

문제
숫자 덧셈을 기대했지만 문자열 연결이 발생할 때.

해결
명시적으로 숫자로 변환하거나, 덧셈 연산을 먼저 수행하도록 괄호를 사용합니다.

전통적인 + 연산자는 복잡하거나 긴 문자열을 만들 때 가독성이 떨어지고 성능상의 미세한 이슈가 있을 수 있습니다.

ES6에 도입된 백틱(``)을 사용하는 템플릿 리터럴은 문자열 안에 변수나 표현식을 쉽게 삽입할 수 있어 훨씬 깔끔합니다.

// 기존 방식
const name = "Alice";
const age = 30;
const greeting_old = "안녕하세요, " + name + "님. 나이는 " + age + "살 입니다.";
console.log(greeting_old);

//  대체 방법: 템플릿 리터럴
const greeting_new = `안녕하세요, ${name}님. 나이는 ${age}살 입니다.`;
console.log(greeting_new);

substring(), substr(), slice()는 모두 부분 문자열을 추출하지만, 동작 방식에 약간의 차이가 있어 혼동을 줄 수 있습니다. 특히 substr()은 레거시 기능으로 간주됩니다.

가장 일관성 있고 널리 사용되는 slice()를 기준으로 사용하는 것이 좋습니다. 음수 인덱스도 지원합니다 (문자열 끝에서부터 계산).

const sentence = "The quick brown fox.";

//  `substring(시작, 끝)`: 음수 인덱스를 0으로 취급
const sub1 = sentence.substring(4, 9); // "quick"

//  대체 방법: `slice(시작, 끝)`: 음수 인덱스 지원
const sub2 = sentence.slice(4, 9);      // "quick"
const sub3 = sentence.slice(-4);        // "fox." (뒤에서 4번째 문자부터 끝까지)

console.log(sub2);
console.log(sub3);

특정 문자열이 포함되어 있는지 확인할 때 indexOf()를 사용하고 반환 값이 -1인지 확인하는 것은 조금 번거롭습니다.

이 메서드들은 더 명확하고 간결하게 문자열 포함 여부나 시작/끝 문자열을 확인할 수 있도록 불리언 값(Boolean)을 반환합니다.

const email = "[email protected]";

// 기존 방식 (indexOf)
const isCom_old = email.indexOf(".com") !== -1;
console.log(`기존 방식 (.com 포함?): ${isCom_old}`);

//  대체 방법 1: `includes()`
const isCom_new = email.includes(".com");
console.log(`includes() 방식 (.com 포함?): ${isCom_new}`);

//  대체 방법 2: `endsWith()` (문자열의 끝 확인)
const isEndingCom = email.endsWith(".com");
console.log(`endsWith() 방식 (.com으로 끝남?): ${isEndingCom}`);

특정 문자열을 여러 번 반복해야 할 때 루프를 사용하는 대신 repeat() 메서드를 사용할 수 있습니다.

// 기존 방식 (for 루프)
let star_old = "";
for (let i = 0; i < 5; i++) {
    star_old += "*";
}
console.log(`기존 방식: ${star_old}`);

//  대체 방법: `repeat()`
const star_new = "*".repeat(5);
console.log(`repeat() 방식: ${star_new}`);

이러한 대체 방법들을 사용하면 코드가 더 간결하고, 가독성이 높으며, 유지보수가 쉬워집니다. JavaScript String 객체를 다루는 데 도움이 되셨기를 바라요!