header wave

Post

JS) 백틱 `` 사용법

2022-09-20 AM 05/20
#javascript
#study

``의 사용법을 모르고 여러 개의 변수가 반복될 때 '+'를 사용해서 변수와 문자열을 조합해서 사용하고 있었다.

``을 이용하면 ${}를 통해 문자열과 받아온 변수를 간결하게 조합해서 사용할 수 있다!

console.log(`Hello ${a} I'm ${b} year's old`)

1️⃣  변수에 템플릿 문자열 삽입 후 사용 가능

let story = `Hello, World! I'm "24"`
console.log(story)// Hello, World! I'm "24" 출력

위와 같이 변수 뒤에 내용들을 `(grave accent)로 감싸면 공백, 따옴표 등 작성한 그대로 출력할 수 있음

2️⃣  템플릿 문자열 안에 변수 삽입 가능

const a = "takeU";
const b = 24;

ES5에서는 위에서 선언한 상수 a,b를 문자열 안에 출력하려면 아래와 같이 작성했다.

console.log("Hello " + a + " I'm " + b + " year's old")

보는것과 같이 띄어쓰기도 일일이 해야하고 +로 이어줘야 하므로 번거롭다.하지만 ES6는 아주 편하게 할 수 있음.

이처럼 `에 넣어주고 변수는 ${}사이에 넣어주면 위와 같은 결과를 얻을 수 있다.1번에서 설명한 것과 같이 공백과 따옴표도 그대로 출력이 되어 간단하게 사용할 수 있다!

출처: http://takeuu.tistory.com/89 [워너비스페셜]