본문 바로가기

Javascript/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) 라고 합니다.

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


반응형

닫기