백틱(back-tick) (문자열 보간)

ming·2022년 11월 2일
0

JavaScript

목록 보기
4/8
post-thumbnail

템플릿 리터럴에는 백틱(back-tick) 기호를 사용합니다.

1.
`hello!`
'hello!'
2.
`hello ${1 + 2 + 9}`
'hello 12'
3.
'hello ${1 + 2 + 9}'
'hello ${1 + 2 + 9}'
  1. 백틱 기호를 이용하여 문자열을 입력할 수 있습니다.
  2. ${} 안에 들어간 숫자를 연산하여 출력할 수 있습니다.
  3. 일반적으로 사용하는 따옴표로 같은 내용을 입력할 경우 ${} 문자 그대로가 출력됩니다.
let product = 'Artichoke';
let price = 3.99;
price = 2.25;
let qty = 5;

"You bought " + qty + " " + product + ". Total is: " + price * qty
> "You bought 5 Artichoke. Total is: 11.25"

위와 같은 내용을 아래처럼 바꿔줄 수 있습니다.

`You bought ${qty} ${product}. Total is: $${price * qty}`
> 'You bought 5 Artichoke. Total is: $11.25'

동일한 내용이 출력되지만 입력하는 양은 훨씬 줄어들고 간편해집니다.

0개의 댓글