반응형
템플릿 리터럴(Template Literal)이란
JavaScript 에서 문자열을 입력하는 방식 중 하나로,
기존처럼 작은따옴표( ' )나 큰따옴표( " )를 이용해 사용해 문자를 표현하지 않고,
백틱(Back Tick)이라는 기호( ` )를 사용해 표현하는 방식이다.
템플릿 리터럴 사용해보기
먼저 기존에 사용하던 문자열 표현 방식을 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>템플릿 리터럴</title>
</head>
<body>
<script type="text/javascript">
//기존의 방식 - 1
let a = 20;
const b = 30;
const str1 = a + '와' + b + '의 두 수의 합 : ' + (a+b);
console.log(str1);
//기존의 방식 - 2
const name = "홍길동";
const age = 20;
const addr = "서울";
const str2 = "이름은" + name + "이고 나이는 " + age + "이며, 집은 " + addr + "입니다";
console.log(str2);
</script>
</body>
</html>
기존엔 변수들의 값을 문자열로 사용하고 싶으면 위와 같은 형태로 사용했다.
이를 템플릿 리터럴을 적용하면 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>템플릿 리터럴</title>
</head>
<body>
<script type="text/javascript">
//템플릿 리터널 사용 `${}` - 1
let a = 20;
const b = 30;
const str3 = `${a}와 ${b}의 두 수의 합 : ${a+b}`;
console.log(str3);
//템플릿 리터널 사용 `${}` - 2
const name = "홍길동";
const age = 20;
const addr = "서울";
const str4 = `이름은 ${name}이고 나이는 ${age}이며, 집은 ${addr}입니다`;
console.log(str4);
</script>
</body>
</html>
위처럼 백 틱 ( ` ) 을 사용했고 변수의 필드명을 ${ } 로 그대로 할당받을 수 있다.
실행 결과는 다음과 같다.
이상 템플릿 리터럴이었습니다.
반응형
'Coding Story > JAVASCRIPT' 카테고리의 다른 글
| [ JavaScript ] 자바스크립트 map( ) 함수 (2) | 2020.11.20 |
|---|---|
| [ JavaScript ] 자바스크립트 배열 concat (0) | 2020.11.20 |
| [ JavaScript ] 자바스크립트 화살표 함수 (0) | 2020.11.20 |
| [ JavaScript ] 자바스크립트 삼항 연산자, && 연산자, || 연산자 (0) | 2020.11.19 |
| [ JavaScript ] 자바스크립트 var, let, const 의 차이 (0) | 2020.11.19 |
