템플릿 리터럴은 백틱(BackTick, ``)을 사용하여 내장된 표현식을 허용하는 문자열 리터럴이다. $와 중괄호({})를 사용하여 표현식을 넣을 수 있다. 기존에는 문자를 결합하여 출력하거나, 변수를 문자열에 할당해야할 때 플러스(+)나 콤마(,)를 사용했어야했다. ECMAScript6이후 백틱이 나오면서, 문자열의 결합이나 문자열에 변수를 삽입하는 등을 자연스럽게 결합할 수 있게 되었다. 또한 줄바꿈을 해야할 때 \n을 사용했어야 했지만, 템프릿 리터럴을 사용하여 띄어쓰기 및 엔터로 발생하는 공백을 그대로 표현할 수 있게 되었다.
- `${표현식}`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 2;
let b = 5;
// 예전방법
console.log("a + b = " + (a+b) + " 입니다.");
// 템플릿 리터럴
console.log(`a + b = ${a+b} 입니다.`);
// 예전 줄바꿈 방법
console.log("안녕하세요. \n" + "만나서 반갑습니다.")
// 템플릿 리터럴 줄바꿈
console.log(`안녕하세요.
만나서 반갑습니다.`);
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript의 기초 문법 : 함수 (0) | 2024.07.22 |
|---|---|
| JavaScript의 기초 문법 : 제어문 - 반복문(while / for) (0) | 2024.07.19 |
| JavaScript의 기초 문법 : 제어문 - 조건문 (if / switch-case) (0) | 2024.07.18 |
| JavaScript의 기초 문법 : 연산자 (0) | 2024.07.16 |
| JavaScript에서 사용자의 입력을 받아보자 (0) | 2024.07.15 |
| JavaScript의 기초 문법 : 변수 (0) | 2024.07.15 |
| JavaScript의 기초 문법 : 타입 (0) | 2024.07.15 |
| JavaScript : 정규표현식이란? (0) | 2024.07.01 |