Skip to main content

템플릿 리터럴: 백틱(``), 표현식(${ })

# 템플릿 리터럴(Template Literal)

ES6부터 새로 도입된 문자열 표기법
문자열 생성시 따옴표 대신, 백틱(`)을 사용

var str_01 = `hello world`;
//백틱 사용
const x='x';
const y='y';
const z='z';
 
console.log(`${x}는 x, ${y}는 y, ${z}는 z이다. `); //x는 x, y는 y, z는 z이다.

▶︎ 백틱(`)은 자바스크립트 JS ES6(ECMAScript 2015)부터 도입되었다.

▶︎ 개행 문자(\n)를 사용하지 않아도 자동 줄바꿈

▶︎ 생김새가 작은따움표(')와 비슷하니 헷갈리지 않도록 주의

# 템플릿 리터럴 - 백틱(`)의 기능

줄바꿈(개행: Multi-line strings) 
▶︎ 백틱(`)으로 템플릿 리터럴을 사용하면, 줄바꿈 등을 쉽게 표현할 수 있다.

var str_01 = `
Hi!
    It's me!
             JavaScript!
So Cool!`;

<실행 결과>

image.png


▶︎ 기존 따옴표 방식에서는 줄바꿈이 허용되지 않았기 때문에 백슬러시(\)로 시작하는 이스케이프 시퀀스를 사용해야 했다.

var str_01 = "Hi! \n\t It's me! \n\t\t\t JavaScript! \n So Cool!";

▶︎ \n은 개행(Line Feed), \t는 탭(수평)을 의미하는 이스케이프 시퀀스

# 함수 호출

이전에는 함수를 호출할때 괄호( )를 이용해서 호출했다.
이제 함수를 호출할때 괄호 대신에 백틱(`)을 사용해도 가능하다.
다만, 백틱을 사용할 경우에는 매개변수가 문자열, 배열로 인식된다.

function a(x){
	return x+1;
}
 
a(3); //31
a`4`; //41

#표현식 삽입(Expression interpolation)

▶︎ ${ } 사이에 변수나 연산 등을 삽입할 수 있게 되었다.

var name = `사과`
var price = 100
var num = 5;
 
console.log(`${name}의 구매가는 ${price * num}원 입니다.`)

<실행 결과>

image.png

▶︎ ${ } 의 결과는 문자열로 자동 변환됨.

▶︎ 기존의 따옴표 방식에서는, + 연산자로 여러번 이어 붙이기

var name = `사과`
var price = 100
var num = 5;
 
console.log(name + "의 구매가는 " + (price * num) + "원 입니다");

▶︎ 백틱 안에서 연산도 가능하다. 연산결과는 문자열로 자동 변환

console.log(`${5+10} 입니다`) // 15 입니다

console.log(`${5+10} 입니다`)  // 15 입니다
Back to top