LHJ

I'm a FE developer.

3.8.2 여러 줄 문자열

19 Apr 2020 » js_lj

ES6 이전의 여러 줄 문자열 지원은 솔직히 좋다고 하기는 어려웠습니다.
명세에는 소스 코드의 각 행 마지막에서 줄바꿈 문자를 이스케이프할 수 있도록 정의했지만,
브라우저의 지원이 형편없었으므로 필자는 이 기능을 사용한 적이 없습니다.
ES6에서는 이 기능이 좀 더 믿을 만하게 바뀌었지만, 아직은 조심해야 할 함정이 남아 있습니다.
이 기능은 자바스크립트 콘솔에서는 동작하지 않으므로 시험해 보려면 자바스크립트 파일을 만들어야 합니다.
따옴표를 사용한 문자열에서 다음과 같이 줄바꿈 문자를 이스케이프해 봅시다.

const multiline = "line1\
line2";

multiline 문자열에 줄바꿈 문자가 들어갈 것 같나요?
아닙니다.
첫 행 마지막의 역슬래시는 줄바꿈 문자를 이스케이프하기는 하지만, 문자열에 줄바꿈 문자를 삽입하지는 않습니다.
따라서 결과는 line1line2입니다.
줄바꿈 문자가 들어가게 하려면 다음과 같이 써야 합니다.

const multiline = "line1\n\
line2";

백틱을 사용한 문자열에서는 조금 더 상식적인 결과가 나옵니다.

const multiline = `line1
line2`;

이들 코드의 결과에는 줄바꿈 문자가 들어 있습니다.
하지만 어느 쪽이든, 다음 줄 앞에 있는 들여쓰기가 결과 문자열에 포함됩니다.
예를 들어 다음 코드의 결과 문자열에는 분명 줄바꿈 문자가 들어가지만, 원하지 않는 공백이 line2와 line3 앞에 들어갑니다.

const multiline = `line1
	line2
	line3`;

따라서 필자는 여러 줄 문자열을 권하지 않습니다.
여러 줄 문자열을 쓰려면 코드를 읽기 쉽게 만드는 들여쓰기를 포기하거나,
결과 문자열에 원하지 않는 공백이 들어가거나 둘 중 하나입니다.
소스 코드에서 문자열을 여러 행에 나눠 써야 할 때 필자는 보통 문자열 병합을 사용합니다.

const multiline = "line1\n" +
	"line2\n" +
	"line3";

이렇게 하면 코드를 읽기 쉽게 쓸 수 있고, 결과 문자열도 원하는 형태로 만들어 집니다.
문자열 병합을 사용할 때는 따옴표와 백틱을 섞어 써도 괜찮습니다.

const multiline = 'Current temperature:\n' +
	`\t${currentTemp}\u00b0C\n` +
	"Don't worry...the heat is on!";