JavaScript 자바스크립트 템플릿 리터럴 : 백틱(“)

 

---

 

들어가며

 

📌인터넷 익스플로러 2022년 6월 15일 부로 지원 종료됨으로써 ES6에서 새로운 문자열 표기법으로 큰따옴표(" ")가 아닌 백틱(` `)을 사용해 문자열을 사용하려고 정리

 

---

 

자바스크립트 백틱 사용법

 

변수와 함께 사용

/* '${변수명}'을 사용하여 문자열 안에 변수를 삽입 */

let name = "키큰난쟁이";
console.log(`안녕하세요, ${name}님!`); // "안녕하세요, 키큰난쟁이님!" 출력

 

다중 라인 문자열

/* 백틱을 사용하면 문자열을 여러 줄에 걸쳐 작성 */

let message = `
    여러줄의
    문자열을 쉽게
    작성할 수 있습니다.
`;
console.log(message);

 

표현식 사용

/* 백틱 내부에서 표현식도 사용 가능 */

let x = 5;
let y = 10;
console.log(`두 수의 합은 ${x + y}입니다.`); // "두 수의 합은 15입니다." 출력

 

---

 

JSP에서 자바스크립트 백틱 사용 시 주의점

 

JSP를 사용할 경우

/* JSP의 EL 표현식과 JavaScript의 템플릿 문자열이 겹치게 됩니다. */

// JAVA Controller
request.setAtteinute("msg", "서버에서 넘어온 데이터");

// JavaScript
let msg = '자바스크립트 변수 데이터'
let message = `나는 ${msg} 입니다.`; // "나는 서버에서 넘어온 데이터 입니다." 출력

 

JSP에서 백틱 함수를 사용하기 위한 해결 방법

// JAVA Controller
request.setAtteinute("msg", "서버에서 넘어온 데이터");

// JavaScript
let msg = '자바스크립트 변수 데이터'

// 첫번째 방법
let message = `나는 ${"${msg}"} 입니다.`; // "나는 자바스크립트 변수 데이터 입니다." 출력

// 두번째 방법
let message = `나는 \${msg} 입니다.`; // "나는 자바스크립트 변수 데이터 입니다." 출력

 

---