[JS] 템플릿 리터럴(Template Literal)을 알아보자

템플릿 리터럴(Template Literal)

`문자열`

`문자열 ${표현식} 문자열`

tag(함수 이름) `문자열 ${표현식} 문자열`로 쓸 수 있다.

 

백틱 안에 표현식을 작성하는데, 표현식을 ${표현식} 형태로 작성해 =아래와 같이 쓰인다.

console.log(`ABC`) // ABC

const one = 1, two = 2;
const result = `1+2는 ${one + two}이 된다`;

console.log(result) // 1+2는 3이 된다

 

줄바꿈을 할 때도 쓰인다.

ES5처럼 \n을 사용하지 않고 백틱 안에서 줄을 바꿀 수 있다. 

console.log("ES5-1라인\n2라인")

// ES5-1라인
// 2라인

console.log(`1라인
2라인`)

// 1라인
// 2라인

---

tagged Template

템플릿에 함수 이름을 작성한 형태

호출되는 함수를 태그 함수라고 부른다.

 

아래와 같이 show 함수를 호출하면 문자열 -> 배열로 바뀌어 파라미터로 넘어가고, 표현식 결과도 하나씩 파라미터로 넘긴다 .

const one = 1, two = 2;
const show = (text, value) => {
    console.log(`${text[0]}${value}`); // 1 + 2 = 3
    console.log(text[1]) // ""
    console.log(text) // ['1 + 2 = ', '', raw: Array(2)]
};

show `1 + 2 = ${one + two}`;

템플릿에서 문자열(1 + 2 = )과 표현식(${one + two})을 분리한다.

show 함수를 호출하면 문자열이 배열로 바뀌는데, 왼쪽에서 오른쪽으로 배열 엘리먼트를 추가하되 마지막에는 빈 문자열을 추가한다. 그래서 text를 콘솔에 찍었을 때 문자열이 text[0]이고, 빈 문자열이 text[1]에 찍히는 것이다.

 

• 호출한 곳에서 표현식을 평가한 값을 다수 넘겨줄 때는 아래와 같이 진행된다.

const one = 1, two = 2;
const show = (text, plus, minus) => {
    console.log(`${text[0]}${plus}`); // 1+2=3
    console.log(`${text[1]}${minus}`); // 이고 1-2=-1
    console.log(`${text[2]}${text[3]}`); // 이다undefined 
};

show `1+2=${one+two}이고 1-2=${one-two}이다`;

문자열이 배열로 바뀌니까 text = ["1+2=", "이고 1-2=", "이다"]가 된다.

plus는 ${one+two}, minus는 ${one-two}로 들어간다.

 

태그 함수의 끝에 문자열이 있을 경우에는 처음 했던 것처럼 마지막에 빈 문자열을 추가하지 않는다.

따라서 text[3]은 없는 값이라서 undefined가 뜬 것이다.

 

• 태그 함수에 Rest 파라미터를 작성할 수 있다.

const one = 1, two = 2;
const show = (text, ...rest) => {
    console.log(`${text[0]}${rest[0]}`); // 1+2=3
    console.log(`${text[1]}${rest[1]}${text[2]}`); // 이고 1-2=-1이다
};

show `1+2=${one+two}이고 1-2=${one-two}이다`;

text = ["1+2=", "이고 1-2=", "이다"] 이고, 표현식은 ${one+two}, ${one-two}다.

Rest 파라미터는 배열 형태로 들어가기 때문에 [3, -1]이라 이걸 하나씩 꺼낸다고 보면 0번째 인덱스의 값이 3, 1번째 인덱스의 값이 -1로 순차적으로 대입해 계산할 수 있다.

---

String.raw

String.raw를 쓰면 표현식을 일반 문자로 처리한다.

const one = 1, two = 2;
const result = String.raw `1+2=${one + two}`;

console.log(result) // 1+2=3

 

줄 바꿈의 경우에도 \n을 그냥 문자로 출력해서 민망해진다.

console.log(`one\ntwo`)
// one
// two

console.log(String.raw `one\ntwo`)
// one\ntwo

 

유니코드의 경우에도 민망해지는 건 똑같다.

console.log(`\u{31}\u{32}`) // 12
console.log(String.raw `\u{31}\u{32}`) // \u{31}\u{32}

 

String.raw()의 첫 번째 파라미터에는 {raw: 값} 형태가 들어간다. (꼭 raw여야 함)

두 번째 파라미터에는 조합할 값이 들어간다. 

const one = 1, two = 2;
console.log(String.raw({raw: "ABCD"}, one, two, 3)) // A1B2C3D

raw에 들어 있는 값의 맨 처음 것부터 one, 두 번째 값, two 이런 식으로 왔다갔다 조합해준다.

 

배열의 경우도 동일한데 잘 보면 3이 붙지 않았다.

rawValue의 길이만큼 다 나오면 그 뒤에는 값을 붙이지 않는다. 

const rawValue = {raw: ["A", "B", "C"]};
console.log(String.raw(rawValue, 1, 2, 3)) // A1B2C