[자바스크립트 ES6+ 기본] 13. Template Literal

 

Template Literal

Syntax: `문자열`
	`문자열 ${표현식} 문자열`
    	tag `문자열 ${표현식} 문자열`

• Template Literal
  • 문자열 처리를 위한 리터럴
  • 표현식을 포함할 수 있음
  • 강좌에서는 템플릿으로 표기
• backtick 안에 표현식 작성
  • 표현식을 ${표현식} 형태로 작성

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

// ABC
// 1 + 2는 3이 된다

---

tagged Template

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

const one = 1, two = 2;
const show = (text, value) => {
  log(`${text[0]}${value}`);
  log(text[1]);
};
show `1 + 2 = ${one + two}`;

// 1 + 2 = 3
// ""

• 호출되는 함수를 태그 함수(tag function)라고 부름
• show() 함수를 호출하면서
  • 문자열을 배열로 파라미터로 넘기고
  • 표현식 결과를 하나씩 파라미터로 넘김

---

• 호출하는 곳에서
  • 표현식을 평가한 값을 다수 넘겨줄 때

태그 함수에 대응하는 파라미터 이름을 작성한 형태

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

// 1+2=3
// 이고 1-2=-1
// 이다undefined

• 문자열을 분리하면
  • ["1+2=", "이고 1-1=", "이다"]
  • 3개의 배열 엘리먼트가 됨
• 표현식을 분리하면
  • ${one + two}와 ${one - two}
• show 태그 함수를 호출

---

태그 함수에 Rest 파라미터 작성

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

// 1+2=3
// 이고 1-2=-1이다

• 문자열을 분리하면
  • ["1+2=", "이고 1-2=", "이다"]
  • 3개의 배열 엘리먼트가 됨
• 표현식을 분리하면
  • ${one + two}와 ${one - two}
  • [3, -1]
• show 태그 함수를 호출

---

String.raw

• String 오브젝트에 속하지만
  • Template을 사용하므로 여기서 다룸
• String.raw에
  1) 이어서 Template 작성

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

// 1+2=3

2) 줄 바꿈을 문자로 처리

log(`one\ntwo`);
log(String.raw `one\ntwo`);

// one
// two
// one\ntwo

3) 유니코드의 코드 포인트 처리

log(`\u{31}\u{32}`);
log(String.raw `\u{31}\u{32}`);

// 12
// \u{31}\u{32}

---

String.raw()

• raw의 "문자열"을 문자 하나씩 전개하면서
  • 두 번째 파라미터부터 조합하고 연결

1) 문자열

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

// A1B2C3D

2) 배열

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

// A1B2C

• 첫 번째 파라미터는 {raw: 값} 형태
• 두 번째 파라미터부터 조합할 값 작성
  • ({raw: "ABCD"}, 1, 2, 3)