[JS]자바스크립트 템플릿 리터럴

 

 

 

 

 

 

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다.

쉽게말해 여러 줄로 이루어진 문자열과 문자 보간기능을 사용할 수 있도록 해준다. 

 

 

기존 ES5는 문자열을 만들 때는 큰 따옴표("), 작은 따옴표(')를 사용해서 문자열을 만들었다.

var name = "Jinny";
console.log("My name is " + name + "."); // My name is Jinny.

 

ES6의 템플릿 리터럴은 백틱( ` )기호를 사용해서 문자열을 더 간편하게 만들 수 있다.

문자열에 변수를 넣고 싶으면 ${변수}와 같이 쓰면 된다.

var name = "Jinny";
var introduce = `My name is ${name}.`;

console.log(typeof(introduce)); // string
console.log(introduce); // My name is Jinny.

 

또한, +연산자를 사용하지 않아도 줄바꿈을 허용하며 큰 따옴표("")와 작은 따옴표('')도 사용 가능하다.

// ES5 문법
console.log("string text line 1\n"+
"string text line 2");
// "string text line 1
// string text line 2"

// ES6 문법
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

 

마지막으로 innerHTML처럼 태그를 쉽게 삽입할수있다.

var tags = `<div><span>템플릿 리터럴</span></div>`;
console.log(tags) // <div><span>템플릿 리터럴</span></div>

 

 

 

 

 

 

 

 

#참고사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals