ECMAScript2015 강의 자료입니다.

1. ECMAScript 2015
by jbee

2. [ES6] 7. Template literal

3. console.log(`template literal`);
ES6에서문자열처리를보다간편하게 할수있는 템플릿 을제공한다. 문자열
처리를위해single quote나double quote가 아닌Backtick을사용한다. 변
수를 ${ } 로감싸서inline으로표현할수있으며n을작성할필요없이
Backtick 안에서개행을해주면된다. 기존의템플릿엔진들에서제공하고 있
었던기능인 ${ } 안에는 변수 또는 연산식 등의 표현식 이들어갈 수있
다.

4. Example code>
let name = "jbee";
//ES5
console.log("Hi, " + name + "!nHave a nice day!");
// console>
// Hi, jbee!
// Have a nice day!
//ES6
let grettingTemplate = `
Hi, ${name}!
Have a nice day!
`;
console.log(grettingTemplate);
//console>
// Hi, jbee!
// Have a nice day!
Template literal을사용하여거추장스러운 '+' 이나 'n' 을더이상사용
하지않아도된다.

5. tagged template

6. 위템플릿리터럴을 tagged template 을사용하여 text 와 value 로분
리할수있다. text 는공백문자를기준으로 배열 의형태로파라미터가 들
어오며, ${ } 안의표현식은 value 라는파라미터로 String type으로들
어온다.
let name = "jbee"
let num = 27;
console.log(`hi, ${name}! Have a nice day! ${num} is your numbe
//console> hi, jbee! Have a nice day! 27 is your number

7. parameter로넘겨지는 value 는하나인데, 템플릿리터럴에는표현식이두
개가 존재한다. 그렇기 때문에number에해당하는값이함수로넘겨지지못
했다.
function greet(text, value) {
console.log(text);
console.log(value);
console.log(typeof value);
}
greet `hi, ${name}! Have a nice day! ${num} is your number`
//console> [ 'hi, ', '! Have a nice day! ', ' is your number' ]
//console> jbee
//console> string

8. 이렇게 해결할수있지만, 지난chapter에서다룬 Rest parameter 를사용
할수있다.
function greet(text, value, value2) {
console.log(text);
console.log(value);
console.log(value2);
}
greet `hi, ${name}! Have a nice day! ${num} is your number`
//console> [ 'hi, ', '! Have a nice day! ', ' is your number' ]
//console> jbee
//console> 27

9. function greet(text, ...value) {
console.log(text);
console.log(value);
}
greet `hi, ${name}! Have a nice day! ${num} is your number`
//console> [ 'hi, ', '! Have a nice day! ', ' is your number' ]
//console> [ 'jbee', 27 ]

10. 템플릿리터컬의표현식값 결정
템플릿리터럴을사용하여문자열을함수의파라미터를넘길 수있을것이다.
그렇다면템플릿러터럴내부의표현식의값은언제결정될까?

11. // Assign expression statement
function greeting(message) {
let name = `ecmascript`;
console.log(message);
}
let name = `jbee`;
greeting(`Hi, ${name}`);
//console> Hi, jbee
함수의파라미터로넘겨질때부터결정되어넘어가기 때문에 greeting 이라
는함수내부에있는local variable인 ecmascript 라는단어가 name 으로
들어가지않고 jbee 라는문자열이 name 의값으로결정되었다.
즉, 호출시점에 ${} 값이결정된다.

12. 7. end