(Javascript) 템플릿 리터럴

템플릿 리터럴 (Template literals)


템플릿 리터럴은 ES6에서 새로 도입된 문자열 표기법이다.

템플릿 리터럴은 기존의 일반 문자열에서 사용되던 따옴표 (‘ ‘ , “ “) 대신 백틱 (``)을 사용한다. (esc키 바로 아래에 있다.)

예제코드를 보며 알아보자.


console.log(`템플릿 리터럴을 사용한 문자열 출력`)
// 템플릿 리터럴을 사용한 문자열 출력

줄바꿈이 허용된다. 여러 줄에 걸쳐 작성이 가능하다.

console.log(`템플릿 리터럴을
사용한
문자열 출력`)
/*
템플릿 리터럴을
사용한
문자열 출력
*/

템플릿 리터럴로 문자열에 표현식을 삽입할 수 있다.

${ } 을 이용한다.

// ES5 일반 문자열

const name = "Jae"
const age = 21
const job = "Student"

info = 'Name is ' + name + ', Age is ' + age + ', Job is ' + job
console.log(info)
// Name is Jae, Age is 21, Job is Student

// ES6 템플릿 리터럴

const name = "Jae"
const age = 21
const job = "Student"

info = `Name is ${name}, Age is ${age}, Job is ${job}`
console.log(info)
// Name is Jae, Age is 21, Job is Student

ES5의 문자열 활용 방식은 문자열과 변수가 + 로 난잡하게 조합돼있어 보기 불편하다. 템플릿 리터럴을 사용하여 간편하게 문자열과 변수를 합칠 수 있다.

변수 대입 뿐만 아니라 연산도 가능하다.

var a = 10
var b = 20

console.log(`a+b: ${a+b}
a*b: ${a*b}`)

/*
a+b: 30
a*b: 200
*/