[1] 템플릿 리터럴

내장된 표현식을 하용하는 문자열 리터럴

• 표현식/문자열 삽입, 여러 줄 문자열 등의 기능을 제공한다.
• 런타임 시점에 일반 자바스크립트 문자열로 처리/변환된다.
• 따옴표가 아닌 백틱(`)을 사용한다.
• 플레이스홀더 ${}를 이용해서 표현식을 넣을 수 있다.

let str = `name is ${name}`;

(1) 표현식 삽입

// ES6 이전
let str = "저는 " + name + " 입니다.

// 템플릿 리터럴
let str = `저는 ${name} 입니다.`

(2) 태그드 템플릿

템플릿 리터럴에서 발전된 형태라고 한다.

템플릿 리터럴을 함수로 만들어서 사용하는 방법이다.

• 템플릿 리터럴 함수 내부에 조건을 주어 출력하는 반환값을 바꿀 수도 있고 자주 반복 사용되는 문장을 함수로 반환도 가능한 유용할 수도 있는 기능이다.

// personExp, ageExp는 아무렇게 지은 이름이다.
let tag = function(string, personExp, ageExp) {
    조건식 등등 추가 가능
    return string[0] + personExp + string[1] + ageExp;
}

let name="철수"
let age=19
let name1="영희"
let age1=18


console.log(템플릿함수명`문자열1 ${변수1} 문자열2 ${변수2}`
console.log(tag`나는 ${name} 나이는 ${age}`);
// 나는 철수 나이는 19
console.log(tag`나는 ${name1} 나이는 ${age1}`);
// 나는 영희 나이는 18

(3) Multi-line strings(유용한기능)

템플릿 리터럴을 사용하면 여러줄의 문자열로 구분해서 사용해도 1줄로 사용하는 것과 같다.

let str  = "동해물과 백두산이 마르고 닳도록 \n" + "하느님이 보우하사 ~~~";

let str = `동해물과 백두산이 마르고 닭도록
하느님이 보우하사 ~~~`;

(4) Nesting templates

.간단하게 보면 삼항연산자를 사용할 수 있다는 이야기인데.. 예시를 봐도 오히려 더 안좋을 수도 있을 것 같다.

(5) 기본 문자열 출력

``으로 감싸진 문자열을 그래도 출력하는 방법

String.raw`특수문자가 포함된 문자열`;

(6) 간단한 연산(유용한 기능)

let str = 가나다라마바사
let temp = `${str}를 거꾸로 읽으면 ${str.split("").reverse().join("")}`;