[JS] 템플릿 리터럴(Template Literal)

Shy·2024년 5월 13일

JavaScript

목록 보기

4/5

템플릿 리터럴

참고한 글! ~~너무 정리를 잘하셔서 애용합니다.~~

템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공한다.

JavaScript의 템플릿 리터럴(Template Literal)은 ES6(ECMAScript 2015)에서 도입된 문자열 처리 기능으로, 백틱(backtick) 기호로 감싸여 있는 문자열을 의미한다. 템플릿 리터럴을 사용하면 기존의 문자열 처리 방식보다 더 간편하고 가독성 있게 문자열을 작성할 수 있다.

1. 여러 줄 문자열(Multiline Strings)

const multiLineString = `이것은
여러 줄에 걸친
문자열입니다.`;
console.log(multiLineString); // 위처럼 엔터가 적용된 문자열이 출력된다.

2. 내장 표현식(Embedded Expressions)

${} 구문을 사용하여 문자열 내에 변수를 삽입할 수 있다.

const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting);  // 출력: Hello, Alice!

3. 태그된 템플릿 리터럴(Tagged Template Literals)

태그 함수(Tag Function)를 사용하여 템플릿 리터럴을 더욱 복잡하게 처리할 수 있다. 태그 함수는 템플릿 문자열의 조각들과 내장 표현식을 함수의 매개변수로 받아 처리한다.

function tag(strings, ...expressions) {
  console.log(strings);  // 문자열 조각 배열
  console.log(expressions);  // 내장 표현식 배열
  return `${strings[0]}${expressions[0]}${strings[1]}`;
}

const name = 'Bob';
const result = tag`Hello, ${name}!`;
console.log(result);  // 출력: Hello, Bob!

JavaScript에서 태그된 템플릿 리터럴을 사용할 때, 첫 번째 매개변수로 들어가는 변수에 문자열 조각 배열이 자동으로 전달되는 것이 언어의 내장된 규칙이다. 태그 함수는 템플릿 리터럴의 구문에 따라 자동적으로 특정 데이터 구조를 받는다.

첫 번째 매개변수
- 템플릿 리터럴에서 사용된 표현식들을 구분하는 정적 문자열 조각들을 포함한다. 이 매개변수는 항상 배열 형태로 전달되며, 배열의 각 요소는
나머지 매개변수
- 템플릿 리터럴 내의 각 표현식들이 평가된 결과들을 배열로 전달받는다. 위처럼 배열로 묶을 수도 있지만, 아래와 같이 개별의 변수로 넣을 수 있다.

let person = 'Lee';
let age = 28;

let tag1 = function(strings, personExp, ageExp) {   
    console.log(strings); // 첫 인수는 배열이 들어오고
    console.log(personExp); // 나머지 인수는 ${person}값이 들어온다.
    console.log(ageExp); // 나머지 인수는 ${age}값이 들어온다.
};

let output = tag1`that ${person} is a ${age}`;

4. 템플릿 리터럴 내 연산

템플릿 리터럴 내에서는 다양한 연산을 수행할 수 있다.

const a = 5;
const b = 10;
console.log(`곱셈: ${a * b}`);  // 출력: 곱셈: 50
console.log(`덧셈: ${a + b}`);  // 출력: 덧셈: 15

5. 함수 호출 및 기타 표현식

템플릿 리터럴 내에서 함수 호출이나 기타 JavaScript 표현식을 사용할 수 있다.

function getGreeting(name) {
  return `Hello, ${name}`;
}

const name = 'Charlie';
console.log(`${getGreeting(name)}! How are you today?`);

6. 중첩된 템플릿 리터럴

중첩 템플릿 리터럴은 조건에 따라 복잡한 문자열을 생성할 때 유용하게 사용될 수 있다. 기본적으로 템플릿 리터럴 내부에 또 다른 템플릿 리터럴을 삽입하여 더욱 동적이고 가독성 높은 코드를 작성할 수 있다.

const user = {
    name: "James",
    isLoggedin: true,
    timezone: 'morning'
};

const greeting = `Hello ${user.isLoggedin ? `${user.name}, good ${user.timezone}` : 'guest'}`;

console.log(greeting);
// Hello James, good morning

const user = {
    name: "Jane",
    isLoggedIn: true,
    cart: {
        items: 3,
        isEmpty: false
    }
};

const message = `Welcome ${user.isLoggedIn ? `${user.name}` : 'guest'}, 
${user.cart.isEmpty ? 
    'your cart is empty.' : 
    `you have ${user.cart.items} item${user.cart.items > 1 ? 's' : ''} in your cart.`
}`;

console.log(message);
// Welcome Jane, 
// you have 3 items in your cart.