본문 바로가기

Web/Javascript

[ Javascript ] 알아두면 유용한 문법 - Template Literal

반응형

안녕하세요 코띵입니다.

저는 이 개념을 프로그래밍을 하면서 한 번도 써본 적 없었습니다.

알아두면 쓰이는 일이 있을 것 같아서 포스팅합니다.

 

| Template Literal

이는 변수와 함께 하나의 문자열을 출력할 때 유용하게 쓸 수 있는 개념입니다.

다음과 같이 예시를 들어보겠습니다.

 

1
2
3
4
const person = {
  name: 'imcodding',
  hobby: 'coding'
}
1
2
3
4
5
function print(person) {
  const { name, hobby } = person;
  const text = '저는' + name + '이고, 취미는 ' + hobby + '입니다.'
  console.log(text)
}

위와 같이 객체가 있고, 객체를 출력하는 함수가 있습니다.

변수를 넣은 하나의 문장을 만들고 싶을 때 변수와 문자를 붙여줘야합니다.

하지만 이렇게 하는 것은 변수가 많아질수록 번거로워질 수 있습니다.

 

이를 간단하게 하는 방법이 있습니다.

 

1
2
3
4
5
function print2(person) {
  const { name, hobby } = person;
  const text = `저는 ${name}이고, 취미는 ${hobby}입니다.`
  console.log(text)
}

 

바로 문자열을 ` ` (키보드에서 ~표시에 있는 것) 안에 넣어주고 ${} 안에 변수를 넣어주는 것입니다.

그러면 한 번에 문자와 변수를 입력할 수 있게 됩니다.

 

이상입니다. 감사합니다.

도움이 돼셨다면 좋아요 꾸욱. 부탁드립니다.

 

 

[ 사용된 다른 개념 ] 비구조화 할당 문법 

 

[ JavaScript ] 알아두면 유용한 문법 - 비구조화 할당(1)

안녕하세요, 코딩입니다. 요즘에 자바스크립트를 공부 중인데요, 공부를 하다보니 알아두면 유용할 개념들이 많더라구요. 그래서 자바스크립트도 포스팅을 하기로 했습니다. | 비구조화 할당 ��

im-codding.tistory.com

 

반응형