TIP 4: 템플릿 리터럴로 변수를 읽을 수 있는 문자열로 변환

자바스크립트에서 문자열을 연결하는 방법은 복잡하다.

하지만 템플릿 리터럴로 복잡도를 줄일 수 있다.

 

 

복잡한 기존의 연결 방법

-각 부분을 + 기호로 연결.

//url과 이미지 ID를 조합하고, 이미지 너비를 쿼리 매개변수로 넘겨주는 형식의 url을 만드는 함수
function generateLink(image, width) {
  const widthInt = parseInt(width, 10);
  return 'https://' + getProvider() + '/' + image + '?width=' + widthInt;
}

--> url의 라우팅이 더 길거나 매개변수를 더 추가해야 한다면 함수가 더 길어질 우려가 있다.

 

 

---

 

템플릿 리터럴: 자바스크립트 표현식을 사용해서 문자열을 연결하고 새로운 문자열을 생성하는 문법.

 

1. 따옴표나 쌍따옴표 대신 백틱을 사용한다.
2. 변수에 할당한 문자열처럼 단순 문자열이 아니라면 특별한 지정자로 감싸야 한다. ( ${stuff}처럼 $나 중괄호로)

 

---

 

 

• 템플릿 리터럴은 문자열과 변수를 연결할 때 가장 자주 사용한다. 

function yell(name) {
  return `HI, ${name.toUpperCase()}!`;
}
greet('Pankaj');
'HI, PANKAJ!';

 

 

• 템플릿 리터럴은 자바스크립트 동작을 수행하기도 한다. 

//문자열을 대문자로 변환
function yell(name) {
  return `HI, ${name.toUpperCase()}!`;
}
greet('Pankaj');
'HI, PANKAJ!';

 

//수학 계산과 연결
function leapYearConverter(age) {
  return `윤년에 태어났다면 ${Math.floor(age / 4)}살이야.`;
}
leapYearConverter(34);
// "윤년에 태어났다면 8살이야."

 

 

 

---

 

앞서 작성했던 문자열 연결 코드를 템플릿 리터럴로 정리하면 다음과 같이 훨씬 깔끔하게 정리할 수 있다. 

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