Javascript ES6 - 템플릿 문자열

템플릿 문자열

자바스크립트에서 문자열안에 값을 써야 하는 경우가 아주 많습니다. ES6이전에는 이러한 처리를 다음과 같이 문자열 병합으로 해결 했었습니다.

var value = 5;

console.log("값은 "+ value + "입니다."); //값은 5입니다.

하지만 ES6에서는 템플릿 문자열이라는 기능을 제공합니다. 마치 C언어에서 FormatString과 같이 문자열에 값을 바인딩 하여 사용 할 수 있습니다. 다음은 위 코드를 템플릿 문자열을 사용하여 value를 문자열에 바인딩 한 예입니다.

var value = 5;

console.log(`값은 ${value}입니다.`); //값은 5입니다.

 

템플릿 문자열을 사용할때는 작은 따옴표' 나 큰따옴표" 를 사용하지 않고 백틱(backtick)문자 ` 를 사용합니다.

백틱 문자를 이용하여 문자열을 감싸고 값은 ${변수}로 바인딩 합니다. 

만약 $기호를 템플릿 문자열 안에서 사용해야 한다면 다음과 같이 백슬래시로 이스케이프 할 수 있습니다.

var value = 4;

console.log(`사달라는 ${value}\$`);// 사달라는 4$