Javascript 백틱(`, backtick) 간단 사용 설명서

Javascript 백틱(`, backtick) 사용법에 대해 간단하게 알아보자

 

1. 문자열 사용

const backtick = `this is backtick`;

 

2. 백틱 문자열 내부에 변수 사용

const val = 36;
const backtick = `this is ${val} backtick`;

백틱 내부에서 ${ } 를 사용하면 된다.

 

3. 백틱 내부에서 삼항 연산자 사용 (백틱 내에서 조건문 사용)

const val = 36;
const t = 10;
const f = 20;
// 만약 val 이 30 보다 크면? => t(10)
// 만약 val 이 30 보다 작다면? => f(20)
const backtick = `this is ${ val > 30 ? t : f } backtick`;

 

4. 기타 활용 예시

const val = 30;
const id = "saveBtn";
const innerHTML = `<td><input type="button" value="${val}" id="${id}_${val}"></td>`;
// innderHTML을 특정 요소 내에 추가 한다던가...

// ...(생략)
const settings = {
    url : `/user/${id}.json`,
    method: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(obj),
}
// ...(생략)

---

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Template literals (Template strings) - JavaScript | MDN

Template literals are literals delimited with backtick (`) characters, ...