[ES6] Template Literal

내가 보려고 만드는 es6 문법 1장 - Template Literal 

 

 

 

 

템플릿 리터럴이란? 

---

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

라고 MDN Web Docs에 나와있죠 ! 

여러줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다.

 

 

간단히 말해서 

백틱(` `) 안에 텍스트를 쓰고 변수는 $와 중괄호( $ {expression} ) 를 사용하여 집어넣어주면 

문자열 그대로 출력이 가능해진 문법이죠.

 

 

 

 

EX 1)

이전버전 

function hello(name) {
	console.log('Hello' + name + '!');
}

hello('Mike');

콘솔안에 '' 나 "" 를 사용해 텍스트는 텍스트대로 변수는 변수대로 + 를 사용하여 합쳐주었는데요 이 문법을 

function hello(name) {
	console.log(`Hello ${name}!`);
}

hello('Mike');

이렇게 사용하게 되면 길이도 짧아질 뿐더러 공백이나 문자열과 변수를 입력한대로 알맞게 출력하게 해줍니다.

 

 

 

 

 

 

EX 2)

var a = 5;
var b = 10;


console.log( a + " + " + b + "는 " + (a + b) + "입니다.\n" +  a + " * " + b + "는 " + (a * b) + "입니다.");


//결과 
a + b는 15입니다.
a * b는 50입니다.

변경 후 

var a = 5;
var b = 10;


console.log(`${a} + ${b}는 ${(a + b)}입니다. 
${a} * ${b}는 ${(a * b)}입니다.`);


//결과 
a + b는 15입니다.
a * b는 50입니다.

 

띄어쓰기와 엔터 또한 그대로 입력한대로 출력되게 됩니다 ^*^

 

아주 쉽죵? 

 

 

MDN 사이트가시면 더 많은 예제들을 학습할 수 있답니다. :)

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals