WEB/JavaScript

[JavaScript] 템플릿 문자열

채소기 2022. 3. 7. 17:47

템플릿 문자열(Template literals)은 내장된 표현식을 허용하는 문자열 리터럴을 말한다.

템플릿 문자열의 사용법은 다음과 같다.

 

`string text ${expression} string text`

보다시피 큰 따옴표나 작은 따옴표 대신 백틱(` `)을 이용한다. 템플릿 문자열은 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호를 이용하여 표기가 가능하다.

 

간단한 예제를 몇 개 살펴보자.

 

`표현식 273 + 52의 값은 ${273 + 52}입니다...!`
'표현식 273 + 52의 값은 325입니다...!'

 

    <script>
      const rawInput = prompt("inch 단위의 숫자를 입력해주세요.");

      const inch = Number(rawInput);
      const cm = inch * 2.54;

      alert(`${inch}inch는 ${cm}cm입니다.`);
    </script>

 

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."