JavaScript에서 문자열은 불변(immutable)이기 때문에 배열처럼 str[2] = 'x'와 같은 방식으로 특정 위치의 문자를 직접 수정할 수 없습니다. 대신 원하는 인덱스를 기준으로 문자열을 나눈 뒤, 새로운 문자를 삽입해 새 문자열을 만들어야 합니다.
substr()을 사용한 기본 방법
가장 널리 알려진 방법은 substr() 메서드를 활용하는 것입니다. 아래 예제는 인덱스 3에 있는 문자를 'x'로 교체하는 전체 코드입니다.
예제
<html>
<head>
<title>JavaScript String Replace</title>
</head>
<body>
<script>
var str = "cric";
document.write("Original String: "+str);
var index = 3;
str = str.substr(0, index) + 'x' + str.substr(index + 1);
document.write("<br>New String: "+str);
</script>
</body>
</html>
출력 결과
Original String: cric New String: crix
str.substr(0, index)는 인덱스 0부터 해당 인덱스 앞까지의 부분 문자열을 반환하고, str.substr(index + 1)은 그 다음 문자부터 끝까지의 문자열을 반환합니다. 이 두 부분 사이에 새 문자 'x'를 연결하면 원하는 위치의 문자만 교체된 새로운 문자열이 완성됩니다.
slice()를 사용한 권장 방법
substr()은 현재 ECMAScript 표준에서 폐기(deprecated)된 상태이므로, 실무에서는 slice()를 사용하는 것이 더 안전하고 권장됩니다.
var str = "cric"; var index = 3; str = str.slice(0, index) + 'x' + str.slice(index + 1); console.log(str); // "crix"
slice()는 음수 인덱스도 지원하며 모든 주요 브라우저에서 일관되게 동작하기 때문에 더욱 유연합니다. 두 방법 모두 원본 문자열을 변경하지 않고 새로운 문자열을 반환한다는 점을 기억하세요. 이 패턴은 입력값 마스킹, 오타 수정 등 다양한 상황에서 유용하게 활용할 수 있습니다.