📌 자바스크립트에서 템플릿 리터럴
자바스크립트에서 템플릿 리터럴은 문자열을 다루는 또 다른 방법으로, 기존의 따옴표(' or ") 대신 **백틱(```)**을 사용하여 문자열을 정의합니다. 템플릿 리터럴을 사용하면 문자열 내에서 표현식을 삽입할 수 있어 더욱 유연하고 직관적인 문자열을 만들 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" contect="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>템플릿 리터럴</title>
</head>
<body>
<script>
const dog = "강아지"
const cat = "고양이"
console.log(typeof cat)
const modifier= "귀여운"
const prettydog= `${modifier} ${dog} 좋아요`
console.log(prettydog)
const prettypet = `${modifier} ${prompt("좋아하는 동물은?")}!`
console.log(prettypet)
</script>
</body>
</html>🚦 템플릿 리터럴이란?
템플릿 리터럴은 문자열을 보다 쉽게 표현할 수 있는 방법입니다. 백틱(```)을 사용하여 문자열을 정의하고, 그 안에 표현식을 삽입할 수 있습니다. 이 방법은 문자열 내에 변수를 쉽게 포함할 수 있게 해주며, 기존의 따옴표 방식보다 더 직관적이고 간편한 코드를 작성할 수 있게 해줍니다.
템플릿 리터럴 문법
let greeting = `Hello, World!`;여기서 **백틱(``)**을 사용하여 문자열을 정의하는데, 기존의 작은 따옴표나 큰 따옴표 대신 백틱을 사용하는 점이 다릅니다.
💻 표현식 삽입하기
템플릿 리터럴은 표현식을 삽입할 수 있는 플레이스홀더 ${}를 제공합니다. 이를 사용하면 문자열 내에 동적으로 데이터를 삽입할 수 있습니다.
예시 1: 변수 삽입
let name = "John";
let greeting = `Hello, ${name}!`; // "Hello, John!"위 코드에서 ${name}은 name 변수의 값을 문자열 안에 삽입하는 역할을 합니다. 따라서 출력된 결과는 "Hello, John!"이 됩니다.
예시 2: 계산식 삽입
let a = 5;
let b = 10;
let result = `The sum is ${a + b}`; // "The sum is 15"위 코드에서는 ${a + b}가 계산된 결과인 15로 대체됩니다. 템플릿 리터럴은 표현식을 삽입할 수 있기 때문에 계산식도 문자열 내에 쉽게 삽입할 수 있습니다.
예시 3: 함수 호출 결과 삽입
let getGreeting = () => "Good morning!";
let message = `The message is: ${getGreeting()}`; // "The message is: Good morning!"getGreeting() 함수가 반환하는 값도 템플릿 리터럴 내에 쉽게 삽입할 수 있습니다.
✅ 마무리
템플릿 리터럴은 문자열 내에서 동적 데이터를 삽입하고자 할 때 매우 유용한 도구입니다. 백틱을 사용해 문자열을 정의하고, ${}를 이용하여 표현식을 삽입할 수 있습니다. 이를 통해 코드가 더욱 읽기 쉽고 직관적해지며, 변수나 계산식을 쉽게 문자열 안에 포함시킬 수 있습니다.
이제 템플릿 리터럴을 활용하여 자바스크립트 코드를 더 효율적으로 작성해 보세요!
'JavaScript' 카테고리의 다른 글
| Chapter 1-9. DOM 소개 (0) | 2025.03.31 |
|---|---|
| Chapter 1-8. undefined 외 (0) | 2025.03.31 |
| Chapter 1-6. 문자열 prompt (0) | 2025.03.31 |
| Chapter 1-5. 변수와 상수 (0) | 2025.03.31 |
| Chapter 1-4. 콘솔출력과 자료형 (0) | 2025.03.31 |