템플릿 리터럴 소개.

문자열 조작은 프로그래밍에서, 특히 대화형 웹 애플리케이션을 구축할 때 매우 일반적인 작업입니다. JavaScript로 작업해 본 적이 있다면 문자열에 몇 가지 변수를 넣어야 했을 것입니다.
이전 버전의 JavaScript에서는 연산자를 사용하여 문자열 연결이라는 프로세스를 통해 문자열을 결합하는 것을 의미했습니다. 그러나 JavaScript ES6(2015) 업데이트에는 템플릿 리터럴이 도입되었습니다. 이제 문자열 보간.

템플릿 리터럴이란 무엇입니까?

템플릿 리터럴을 사용하면 문자열을 더 쉽게 조작할 수 있습니다. (') 또는 (") 대신 백틱(`)으로 묶여 있으며 (${}) 구문을 사용하여 변수를 배치하거나 함수 호출을 문자열에 직접 배치함으로써 문자열 보간을 지원합니다.

다음은 템플릿 리터럴이 문자열 보간을 단순화하는 방법에 대한 예입니다.

const name = "John"
const age = 24

// Old method using concatenation
const greeting = "Hello, "   name   "! You are "   age   " years old."

// New method using template literals
const greetingWithTemplateLiteral = `Hello, ${name}! You are ${age} years old.`

console.log(greetingWithTemplateLiteral) // Outputs: Hello, John! You are 24 years old.

템플릿 리터럴 사용의 이점

1. 가독성 향상

문자열 연결을 사용할 때, 특히 긴 문자열로 작업할 때 많은 기호에서 길을 잃기 쉬웠습니다. 템플릿 리터럴은 더 쉽게 따라갈 수 있는 방식으로 문자열을 작성할 수 있도록 하여 이를 방지합니다.

const product = "laptop"
const price = 1400

console.log(`The price of the ${product} is $${price}`)
// Outputs: The price of the laptop is $1400

2. 여러 줄 문자열

템플릿 리터럴 이전에는 여러 줄 문자열을 만들려면 \n과 같은 이스케이프 문자를 사용해야 했습니다. 이제 백틱(`) 안에 쓸 수 있습니다.

// Old method
const multiLineString1 = "This is the first line"   "\n"   "This is the second line"   "\n"   "This is the third line"

// New method
const multiLineString2 = `This is the first line
This is the second line
This is the third line`

console.log(multiLineString1)
console.log(multiLineString2)
/* Both output:
This is the first line
This is the second line
This is the third line
*/

3. 표현식 평가

계산을 수행하거나, 함수를 호출하거나, 문자열 내의 데이터를 조작할 수도 있습니다.

const a = 1
const b = 10

console.log(`The sum of a and b is ${a   b}`) 
// Outputs: The sum of a and b is 11

const upperCaseName = (name) => name.toUpperCase()
console.log(`Your name in uppercase is ${upperCaseName("John")}`)
// Outputs: Your name in uppercase is JOHN

JavaScript의 일반적인 사용 사례

1. HTML 생성

연결을 사용하여 HTML 문자열을 작성하는 대신 보간을 사용하여 문자열에 직접 변수를 넣을 수 있습니다.

const name = "John"
const htmlContent = `
  
Hello, ${name}!
  
Welcome to the site.
`

2. 메시지 기록

연결할 필요 없이 로그 메시지에 직접 변수를 삽입할 수도 있습니다.

const user = "John"
const action = "logged in"

console.log(`User ${user} just ${action}`)
// Outputs: User John just logged in

3. URL 생성

템플릿 리터럴을 사용하면 URL 구성도 더 쉬워집니다.

const userId = 123
const apiUrl = `https://api.example.com/user/${userId}/details`

console.log(apiUrl)
// Outputs: https://api.example.com/user/123/details

4. 조건부 논리

또 다른 유용한 사용 사례는 조건부 논리입니다. 템플릿 리터럴을 사용하면 if-else 조건의 약어인 삼항 연산자(? :)를 사용하여 문자열에 간단한 조건을 제공할 수 있습니다.
&&(and) 또는 ||와 같은 논리 연산자 (또는)은 문자열에 조건부 부분을 추가하는 데에도 사용할 수 있습니다. 이렇게 하면 추가 if-else 문이나 연결이 필요하지 않습니다.

const isMember = true
console.log(`User is ${isMember ? 'a member' : 'not a member'}`) 
// Outputs: User is a member

템플릿 리터럴 내에 더 복잡한 표현식을 추가할 수도 있습니다.

/* In this example, the condition age >= 18 is evaluated
the result is either “an adult” or “a minor” based on the value of age*/
const age = 24

const message = `You are ${age >= 18 ? 'an adult' : 'a minor'}`

console.log(message) 
// Outputs: You are an adult

/*In this, if isLoggedIn is true and username exists
username is displayed or else, it defaults to “Guest” */
const isLoggedIn = true
const username = "John"

const greeting = `Welcome ${isLoggedIn && username ? username : 'Guest'}`

console.log(greeting)
// Outputs: Welcome John

결론

JavaScript의 템플릿 리터럴은 문자열 보간을 처리하는 더 깔끔하고 효율적인 방법을 제공합니다. 웹 콘텐츠 구축, 메시지 로깅 또는 더 읽기 쉬운 코드 생성 사이에서 이 방법은 필요한 유연성을 제공합니다.

다음번에 변수와 문자열을 다룰 때는 템플릿 리터럴을 사용해 보세요. JavaScript 작업을 위해 이것이 왜 내가 선호하는 방법인지 금방 알게 될 것입니다.

자원

1. MDN 웹 문서 - 템플릿 리터럴
2. GitHub - 1단계 검토 문자열 연구소
3. W3 학교 - JavaScript 템플릿 문자열