[JavaScript]템플릿 문자열(Template string)

무엇일까?

• 문자열에 변수를 포함시킬때 좀 더 직관적이고 편하게 사용하기 위한 기능이다.

템플릿 문자열을 사용하지 않았을 때

• 두 수를 입력받아 두 수의 차이를 나타내는 메세지를 리턴하는 함수를 만든다고 하자.

function computeDifference(num1, num2) {
  return num1 + ", " + num2 + "의 차이는 " + Math.abs(num1 - num2) + "입니다."
}

• 큰따옴표(")와 더하기 기호(+)를 이용하여 다음과 같이 만들 수 있다.

템플릿 문자열을 사용할 때

function computeDifference(num1, num2) {
  return `${num1}, ${num2}의 차이는 ${Math.abs(num1 - num2)}입니다.`
}

• 위와 같이 키보드 1번 옆에 있는 벡틱(`)과 ${}에 변수를 넣어주면 된다.

결과

• 두 경우 결과는 동일하게 출력된다.
• 템플릿 문자열을 사용하면 코드를 읽을 때 가독성이 좋아진다.

참고

[javascript] 템플릿 문자열(template string)