[자바스크립트] 템플릿 리터럴 - 변수를 문자열로 변환

전통적인 방법은 각 부분을 + 기호를 연결하는 것이다.

예제

function createLink(image, width) {
	const widthInt = parseInt(width, 10);
	return 'https://' + getURL() + '/' + image + '?width=' + widthInt;
}

굉장히 복잡해 보인다. 라우팅이 더 길거나 매개변수가 더 추가 된다면 함수가 훨씬 길엊리 수 있다.



템플릿 리터럴을 사용하면 복잡도를 줄일 수 있다. 템플릿 리터럴은 따옴표 또는 상따옴표 대신 백틱(back-tick)(`)을 사용하고 $ 기호와 중괄호로 변수나 다른 자바스크립트 코드를 감싸서 사용한다.


템플릿 리터럴 사용 예제

function createLink(image, width) {
	return `https://${getURL()}/${image}?width=${parseInt(width, 10)}`;
}

훨씬 더 깔끔해보인다.