728x90
반응형
더 자세하게 알아보자
표현식 삽입
템플릿 리터럴은 변수뿐만 아니라 표현식도 삽입할 수 있음. ${} 안에 수식, 함수 호출, 조건문 등을 포함할 수 있으며, 그 결과값이 문자열로 자동 변환됨.
const a = 5;
const b = 10;
const result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // "The sum of 5 and 10 is 15."- ${a + b}는 5 + 10이 계산되어 15로 출력됨.
여러 줄 문자열 (Multi-line String)
템플릿 리터럴을 사용하면 여러 줄 문자열을 매우 쉽게 작성할 수 있음. 기존에는 \n을 사용하거나, 여러 줄을 연결하기 위해 +를 사용해야 했지만, 템플릿 리터럴에서는 줄바꿈을 그대로 표현할 수 있음.
const message = `This is the first line.
This is the second line.
This is the third line.`;
console.log(message);
/*
출력 결과:
This is the first line.
This is the second line.
This is the third line.
*/
태그드 템플릿 리터럴 (Tagged Template Literal)
태그드 템플릿 리터럴은 템플릿 리터럴을 함수와 함께 사용하여 커스텀 문자열 처리를 할 수 있게 해줌. 템플릿 리터럴을 함수의 인수로 전달하고, 구분된 문자열과 변수 값을 처리할 수 있음.
function highlight(strings, ...values) {
return strings.reduce((result, string, i) => {
return `${result}${string}<b>${values[i] || ""}</b>`;
}, "");
}
const name = "Jerry";
const age = 29;
const result = highlight`My name is ${name} and I am ${age} years old.`;
console.log(result);
// "My name is <b>Jerry</b> and I am <b>29</b> years old."
- highlight 함수는 템플릿 리터럴로 전달된 문자열과 변수 값을 받아서, 변수 값을 <b> 태그로 감싸는 기능을 추가함.
- 태그 함수는 템플릿 리터럴을 변형하거나 처리할 수 있는 강력한 방법을 제공함.
템플릿 리터럴과 HTML 생성
템플릿 리터럴은 동적 HTML 생성에 매우 유용함. 기존의 문자열 연결 방식보다 더 직관적으로 HTML 코드를 작성하고, 데이터를 삽입할 수 있음.
const title = "Welcome to My Website";
const body = "This is the body of the website.";
const html = `
<html>
<head>
<title>${title}</title>
</head>
<body>
<p>${body}</p>
</body>
</html>
`;
console.log(html);
- 템플릿 리터럴을 사용하여 HTML을 여러 줄로 작성하고, 중간에 변수를 삽입하여 동적으로 콘텐츠를 생성할 수 있음.
- 이렇게 생성된 HTML은 DOM에 쉽게 삽입되거나, 서버에서 동적으로 콘텐츠를 생성하는 데 활용할 수 있음.
템플릿 리터럴의 장점
- 가독성: 여러 줄 문자열 작성 시, 코드의 가독성이 크게 향상됨.
- 표현식 삽입: 문자열 내에서 수식이나 함수 호출 등 동적인 처리를 간편하게 할 수 있음.
- HTML 템플릿 생성: 동적으로 생성되는 HTML 콘텐츠 작성에 유용함.
- 태그드 템플릿: 커스텀 처리가 가능하며, 문자열을 동적으로 처리할 때 활용할 수 있음.
요약:
- 템플릿 리터럴은 ES6에서 도입된 문법으로, **백틱(`)**을 사용하여 문자열을 처리함.
- ${} 구문을 사용해 변수와 표현식을 문자열에 삽입할 수 있음.
- 여러 줄 문자열을 쉽게 작성할 수 있으며, HTML 코드 작성에도 유용함.
- 태그드 템플릿을 사용하여 문자열을 커스텀 처리하는 기능도 제공함.
728x90
반응형
'Web Development > vue' 카테고리의 다른 글
| [콜럼Vue스] 모듈 Module (0) | 2024.09.30 |
|---|---|
| [콜럼Vue스] 템플릿 리터럴 (Template Literal) (0) | 2024.09.30 |
| [콜럼Vue스] 디렉티브 Directives (0) | 2024.09.29 |
| [콜럼Vue스] Parameter (0) | 2024.09.29 |
| [콜럼Vue스]ES6 (0) | 2024.09.29 |