[javascript] 긴 문자열과 여러줄로 된 문자열을 변수에 저장하기

자바스크립트 코드를 작성할 때 에디터 화면을 넘는 긴 문자열, 또는 아주 긴 HTML 템플릿 코드 등을 작성하는 경우, 코드 가독성을 위해 긴 문자열이나 문장을 여러줄에 나누어 표시해야 하는 경우가 있습니다.

특히 HTML 코드를 템플릿으로 작성해 사용하는 경우 코딩의 편리함과 가독성 사이에서 적절히 타협을 해야할 필요가 생깁니다.

자바스크립트에서는 하나의 긴 문자열을 여러줄에 나누어 표시할 수 있는 방법을 제공합니다.

다른 언어들에서도 유사한 방법을 제공하는 경우가 많기 때문에 알아두면 여러가지로 편리합니다.

역슬래시(Backslash)로 긴 문자열을 여러줄로 나누기

나누는 줄 끝마다 역슬래시를 붙이면 자바스크립트는 하나의 줄로 인식 합니다.

역슬래시는 코드 실행 시점에 제거되기 때문에 문자열 내용에는 영향을 주지 않습니다.

let str1 = 'This \
is\
the\
only\
story.';
console.log(str1); // 'This is the only story.' 를 반환

ES6 에서 추가된 역따옴표(Backquote, Backticks) 사용

더 이상 역슬래시(\) 를 사용할 필요가 없으며 역따옴표(Backquote, Backticks)를 사용해 여러줄로 된 문자열, 또는 템플릿 코드를 역따옴표로 감싸서 하나의 문자열로 묶을 수 있습니다.

let str1 = `This is the only story.`;console.log(str1);/*'This is the only story.' 를 반환*/

!주의할점

역따옴표가 한글 입력에서는 거의 사용되지 않기 때문에 자바스크립트 코딩에 익숙하지 않으면 못찾는 경우가 있는데, 키보드 숫자 1 왼쪽의 물결표시가 있는 키 입니다. 영어로는 백쿼트(Backquote), 또는 백틱(Backticks) 라고 합니다.

또한, 줄바꿈까지 문자열 변수에 그대로 유지되기 때문에 문자열 변수에 역따옴표로 값을 저장할 경우 주의해서 사용해야 합니다.