Categories: JavaScript

JavaScript 자바스크립트 템플릿 리터럴 (Template Literals) 사용법

javascript

템플릿 리터럴이란?

템플릿 리터럴은 ES6(ES2015)에서 도입된 새로운 문자열 표현 방식입니다. 이전의 자바스크립트에서는 문자열을 작성할 때 주로 작은따옴표(‘)나 큰따옴표(“)를 사용했습니다. 하지만 템플릿 리터럴은 백틱(`)을 사용하여 문자열을 표현합니다. 템플릿 리터럴의 가장 큰 특징은 문자열 내에 변수나 표현식을 삽입할 수 있다는 점입니다. 이를 통해 코드의 가독성을 높이고, 문자열 조작을 보다 쉽게 할 수 있습니다.

템플릿 리터럴 장점

간결성과 가독성 향상

템플릿 리터럴은 문자열 내에서 변수와 표현식을 직접 삽입할 수 있게 해주어, 복잡한 문자열 연결 작업을 간소화합니다. 예를 들어, 기존에는 문자열을 ‘+’ 연산자로 연결해야 했지만, 템플릿 리터럴을 사용하면 더욱 직관적이고 간결한 코드 작성이 가능합니다.

다중 행 문자열 지원

템플릿 리터럴은 여러 줄에 걸친 문자열을 쉽게 작성할 수 있게 해줍니다. 기존에는 문자열을 여러 줄에 걸쳐 작성하려면 ‘\n’을 사용하거나 문자열을 연결해야 했지만, 템플릿 리터럴을 사용하면 자연스럽게 여러 줄의 문자열을 생성할 수 있습니다.

표현식 삽입

템플릿 리터럴 내에서는 ${}를 사용하여 직접적으로 변수뿐만 아니라 표현식을 삽입할 수 있습니다. 이는 계산이 필요한 값을 문자열 안에 쉽게 통합할 수 있도록 해주며, 코드의 가독성을 크게 향상시킵니다.

태그된 템플릿 리터럴

태그된 템플릿 리터럴은 추가적인 문자열 처리 기능을 제공합니다. 이는 함수와 템플릿 리터럴을 결합하여, 문자열을 생성하기 전에 함수를 통해 입력된 문자열을 처리할 수 있게 해줍니다. 이를 통해 복잡한 문자열 처리, 사용자 정의 문자열 서식 지정, 문자열 기반 데이터 처리 등 고급 기능을 구현할 수 있습니다.

유지 보수의 용이성

템플릿 리터럴을 사용하면 코드의 유지 보수가 용이해집니다. 복잡한 문자열 조합이 필요한 경우, 템플릿 리터럴을 통해 코드를 더 명확하게 작성할 수 있어, 나중에 코드를 수정하거나 디버깅할 때 시간을 절약할 수 있습니다.

다국어 지원 용이

다국어 지원이 필요한 애플리케이션에서 템플릿 리터럴은 특히 유용합니다. 다양한 언어로의 문자열 번역 시 변수와 표현식을 쉽게 삽입할 수 있어, 로컬라이제이션 작업을 용이하게 할 수 있습니다.

템플릿 리터럴의 사용법

템플릿 리터럴은 다음과 같은 형태로 사용됩니다.

JavaScript

const 변수 = 값;
const 문자열 = `이것은 ${변수}를 사용한 템플릿 리터럴입니다.`;

JavaScript

여기서 ${} 안에 변수나 표현식을 넣어 동적으로 문자열을 생성할 수 있습니다.

변수 삽입

JavaScript

const name = "홍길동";
const greeting = `안녕하세요, ${name}님!`;
console.log(greeting); // "안녕하세요, 홍길동님!"

JavaScript

표현식 사용

JavaScript

const price = 1000;
const taxRate = 0.1;
const total = `총 금액은 ${price + (price * taxRate)}원 입니다.`;
console.log(total); // "총 금액은 1100원 입니다."

JavaScript

다중 행 문자열

템플릿 리터럴은 여러 줄에 걸친 문자열도 쉽게 표현할 수 있습니다.

JavaScript

const multiLineString = `첫 번째 줄
두 번째 줄
세 번째 줄`;
console.log(multiLineString);

JavaScript

태그된 템플릿 리터럴

태그된 템플릿 리터럴은 함수와 템플릿 리터럴을 결합한 형태입니다. 이를 통해 문자열 처리를 더욱 세밀하게 제어할 수 있습니다.

JavaScript

function highlight(strings, ...values) {
    return strings.reduce((result, string, i) => {
        return `${result}${string}<strong>${values[i] || ''}</strong>`;
    }, '');
}

const name = "홍길동";
const age = 600;

const sentence = highlight`제 이름은 ${name}이고, 나이는 ${age}살입니다.`;
console.log(sentence); // "제 이름은 <strong>홍길동</strong>이고, 나이는 <strong>600</strong>살입니다."

JavaScript

결론

자바스크립트에서 템플릿 리터럴은 코드를 간결하고 이해하기 쉽게 만들어 줍니다. 이는 변수와 표현식을 문자열 안에 직접 삽입할 수 있게 해주어, 복잡한 문자열 조합을 단순화시킵니다. 또한, 여러 줄에 걸친 문자열을 쉽게 작성할 수 있고, 동적인 문자열 생성이 가능해집니다. 사용자 정의 함수를 사용한 복잡한 문자열 처리가 가능한 태그된 템플릿 리터럴을 통해 고급 기능도 구현할 수 있습니다. 이 모든 것들은 코드의 유지 보수를 용이하게 합니다.

suover