[js]ES6 Template literals

 

Template literals

 

es6 이후 자바스크립트와 이전 스크립트의 차이는 언제나 중요한 질문 사항 중 하나.

템플릿 리터럴은 원래 자바스크립트에서 문자열을 나타낼 때 쓰던 ''(작은 따옴표)와 +(덧셈연산자) 대신

`(백틱)과 ${ } 표현식을 지원한다.

 

`` 안에는 띄워쓰기, 줄바꿈, ${}를 이용한 변수 등 다양하게 넣을 수 있다. 기존의 ''보다 편해짐.

 

es6 버전

function difference_es6(num1, num2) {
  // 두 단어의 길이 차이 string 출력
  let result = Math.abs(num1 - num2);
  let str = `${num1}, ${num2}의 차이는 ${result}입니다.`;
  return str;
}

 

기존 버전

function difference_js(num1, num2) {
  // 단어의 길이 차이 string 출력
  let result = Math.abs(num1 - num2);
  let str = num1 + ', ' + num2 + '의 차이는 ' + result + '입니다.`;
  return str;
}