백슬래시(\)는 JavaScript에서 문자열을 여러 줄로 나눌 때 매우 중요한 역할을 합니다. 백슬래시 없이 문자열을 중간에 끊어버리면 JavaScript가 해당 문자열을 읽지 못하고, 그 결과 아무런 출력도 생성되지 않습니다.
다음 예제에서는 문자열을 나누는 과정에서 백슬래시를 사용하지 않았기 때문에 화면에 아무것도 표시되지 않습니다.
예제 1: 백슬래시 없이 문자열 나누기 (실패 사례)
<html>
<body>
<p id="backslash"></p>
<script>
document.getElementById("backslash").innerHTML = "Javascript is // 여기서 문자열이 끊어짐
not java!";
</script>
</body>
</html>
문자열 리터럴은 원칙적으로 한 줄 안에서 완결되어야 하므로, 위 코드처럼 줄바꿈으로 문자열을 임의로 끊으면 문법 오류가 발생하고 브라우저에는 아무 내용도 출력되지 않습니다.
반면, 줄이 바뀌는 지점에 백슬래시(\)를 넣어주면 JavaScript는 문자열 전체를 하나로 이어서 읽고 정상적으로 출력합니다.
예제 2: 백슬래시를 사용한 올바른 방법
<html>
<body>
<p id="backslash"></p>
<script>
document.getElementById("backslash").innerHTML = "Javascript is \
not java!";
</script>
</body>
</html>
출력 결과
Javascript is not java!
참고: 더 편리한 최신 방법 — 템플릿 리터럴
ES6(ES2015)부터 도입된 템플릿 리터럴(Template Literal)을 사용하면 백슬래시 없이도 자유롭게 줄바꿈할 수 있습니다. 문자열을 큰따옴표(") 대신 백틱(`)으로 감싸면 됩니다.
document.getElementById("backslash").innerHTML = `Javascript is
not java!`;
또한 한 줄 안에서 줄바꿈 문자를 삽입하고 싶다면 이스케이프 시퀀스인 \n을 활용하는 것도 좋은 방법입니다. 상황에 맞게 백슬래시, 템플릿 리터럴, \n을 적절히 사용하면 가독성 높은 코드를 작성할 수 있습니다.