ES6 템플릿 리터럴(Template literals) - 자바스크립트 가이드 2

ES6 템플릿 리터럴

템플릿 리터럴(Template literals)이란 용어는 생소하게 들릴 수 있는데 쉽게 말하면 문자열 내에 변수를 삽입하거나 표현식을 사용하는 방식입니다. C나 파이썬 등 다른 언어에서는 문자열 포맷팅(string formatting)이 비슷한 기능입니다.

프로그래밍에 있어서 문자열 처리는 가장 중요한 분야입니다. 프로그래밍 언어가 저수준에서 고수준으로 발달할 수록 점점 더 중요해지고 있는데요. 컴파일러(인터프리터)가 문자열을 처리하는 방법은 현대에 와서 많은 발전이 있었습니다. 단순히 문자열을 스크린에 출력하는 것 이상으로 그 안에 변수를 넣거나, 표현식이나 함수를 넣는 방식이 가능한 것이 템플릿 리터럴입니다.

문자열 보간(string interpolation)

문자열 보간(string interpolation)은 변수나 표현식 등을 문자열 내에 사용할 수 있습니다. 이 경우 따옴표(‘ 이나 “)가 아니라 ` 백틱 문자를 사용해서 문자열을 감쌉니다.

// 변수를 포함시킨다

let myNumber = 752;

console.log(`my number is ${myNumber}`);

// 표현식을 넣는다

console.log(`1 더하기 1은 ${1+1} `);

// 함수 사용
function cube(x){
    return x*x*x;
}

let myVar = 3;
console.log(`cube ${myVar} : ${cube(myVar)}`);

*결과:

my number is 752
1 더하기 1은 2
cube 3 : 27

멀티 라인 지원(multiple lines support)

멀티 라인은 여러 줄의 문자열을 표현하는 방식입니다. 보이는 그대로 표현되는 것이 특징입니다. 일반 따옴표로는 별도로 이스케이프 문자를 사용하여 일일히 맞춰야 했습니다.

let msg = `first line
second line
    third line
              forth line
    fifth line
              ${200 + 300}
`
console.log(msg);

*결과:
first line
second line
    third line
              forth line
    fifth line
              500

백틱 이스케이프(Backtick escape)

백틱과 ${}는 백슬래시를 사용해 이스케이프 할 수 있습니다.

console.log(`backtick escape: \`(backslash)`);
console.log(`$`); // works
console.log(`\${}`); // works

*결과:
backtick escape: `(backslash)
$
${}

\n과 \도 백슬래시로 이스케이프 합니다. 백틱 ` 은 소스코드의 엔터키를 CRLF(\r\n 캐리지 리턴과 라인피드)로 활용하지만 \n도 사용가능합니다. 그밖에 \b \t 등의 이스케이프 문자(escape character)가 적용됩니다.

console.log(`\\n`);
console.log(`\\`);

이스케이프 raw

이스케이프를 raw 문자열로 바꾸는 prefix는 String.raw 입니다. 다만 그냥 \과 ${}은 여기서도 \ 백슬래시를 앞에 붙여야 합니다.

const str = String.raw`\b \t \n`;
console.log(str);

요약

ES6 템플릿 리터럴(Template literals)은 문자열 보간(string interpolation)과 문자열 멀티 라인(multiple line)을 지원합니다. 이를 활용하여 스마트한 문자열 처리가 가능합니다.

홈으로

참고링크

Template literals – JavaScript | MDN (mozilla.org)

ES6 템플릿 리터럴(Template literals) – 자바스크립트 가이드 2