[Javascript] New Javascript 3장 - 템플릿 리터럴

✅ 1. 템플릿 리터럴(Templae literal)

템플릿 리터럴이란 백틱( ` )을 사용하여 문자열을 작성하는 방법으로 변수나 표현식을 더욱 쉽게 문자열 안에 삽입하는 기능입니다. 여러 줄 문자열에 작성도 가능합니다.

const name = "Jammy";
const age = 19;

// 기존 문자열 방식
const speak1 = "Hello, My Name is" + name + "I'm " + age + "years old";

// 템플릿 리터럴 방식
const speak2 = `Hello, My Name is ${name}, I'm ${age} years old`;

console.log(speak2);
// Result: Hello, My Name is Jammy, I'm 19 years old

 

✅ 장점:  +  연산 없이 변수를 문자열에 바로 삽입 가능

---

✅ 2.표현식 삽입 가능

표현식에도 템플릿 리터럴을 사용할 수 있습니다.

const x = 10;
const y = 5;
const z = 2;
const c = 6;
const g = 4;

console.log(`10 + 5 = ${x + y}`);
// 출력: 10 + 5 = 15

console.log(`3 * 4 = ${3 * 4}`);
// 출력: 3 * 4 = 12

console.log(`(10 + 2 * 6) / 4 = ${(10 + 2 * 6) / 4}`);
// 출력 (10 + 2 * 6) / 4 = 5.5

---

✅ 3. 여러 줄 문자열

줄이 여러개 일때도 문자열을 출력할 수 있습니다.

const multiLine = `This String
Multi-line
Write JavaScript
`;

console.log(multiLine);

 

✅ 기존 문자열 방식

// 기존 문자열 방식
const oldStyle = "This String\nMulti-line\nWrite";

console.log(oldStyle);

 

• \n 없이 여러줄 가능 -> 가독성과 코드가 깔끔해짐

---

✅ 4. 함수와 조합

function greet(name) {
  return `${name} is running Game! Have a nice Day!`;
}

console.log(greet("Charlie"));
// Result: Charlie is running Game! Have a nice Day!

---

💡정리

• 템플릿 리터럴: 백틱 ( ` ) 사용
• ${} 안에 변수나 표현식 삽입 가능함
• 여러줄 문자열 가능 -> 가독성 ↑ 
• 함수, 연산 등 다양한 상황에서 활용 가능

---

 

GitHub - javascript-only/newJSRoom: https://thinky.tistory.com/category/Front-End/JavaScript