이스케이프 문자(Escape Character)는 개발자가 의도한 방식과 다르게 해석될 수 있는 특수 문자를 말합니다. 예를 들어 문자열 안에서 따옴표나 백슬래시는 자바스크립트 문법상 특별한 의미로 처리되기 때문에 그대로 출력할 수 없습니다. 이러한 문자를 원래 형태 그대로 출력하려면 문자 앞에 백슬래시(\)를 붙여주어야 합니다.
JavaScript의 주요 이스케이프 문자 목록
다음 표는 자바스크립트에서 사용할 수 있는 대표적인 이스케이프 문자들을 정리한 것입니다.
| 코드 | 결과 |
|---|---|
| \b | 백스페이스(Backspace) |
| \f | 폼 피드(Form Feed) |
| \n | 줄 바꿈(New Line) |
| \r | 캐리지 리턴(Carriage Return) |
| \t | 수평 탭(Horizontal Tab) |
| \v | 수직 탭(Vertical Tab) |
| \' | 작은따옴표(Single Quote) |
| \" | 큰따옴표(Double Quote) |
| \\ | 백슬래시(Backslash) |
이 중 실무에서 가장 자주 사용되는 것은 줄 바꿈을 위한 \n, 탭 간격을 위한 \t, 그리고 따옴표와 백슬래시를 출력하기 위한 \', \", \\입니다.
다음은 자바스크립트에서 백슬래시 이스케이프 문자를 활용해 문자열을 출력하는 코드 예제입니다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Escape characters in JavaScript</h1>
<div class="result"></div>
<script>
let str = 'Hello World "This" is some sample \\ Text \'';
let resEle = document.querySelector(".result");
resEle.innerHTML = str;
</script>
</body>
</html>
위 예제에서 문자열 내부의 큰따옴표(\")와 작은따옴표(\'), 그리고 백슬래시(\\) 앞에 역슬래시를 붙임으로써, 자바스크립트가 이를 문법 요소가 아닌 일반 문자로 인식하도록 처리했습니다.
실행 결과
