JavaScript ES6 템플릿 리터럴과 JSP에서의 사용

 

 

템플릿 리터럴이란?

 

• 템플릿 리터럴은 ES6(ECMAScript 2015)에서 도입된 새로운 문자열 리터럴 방식이다. ES6는 JavaScript의 6번째 버전으로, 다양한 새로운 기능들이 추가되었다. 템플릿 리터럴도 그 중 하나이다.
• 템플릿 리터럴(Template literals)은 JavaScript에서 문자열을 다룰 때 사용하는 새로운 방식으로, 백틱(``)을 이용하여 문자열을 만들 수 있다. 이를 통해 문자열 내에 변수나 표현식을 쉽게 삽입할 수 있다.

 

 

 

 

 

1. 문자열 내에 변수 삽입

템플릿 리터럴을 사용하면 문자열 안에 ${} 구문을 이용해 변수나 표현식을 삽입할 수 있다.

let name = "Alice";
let greeting = `Hello, ${name}!`; // 변수 'name'을 템플릿 리터럴에 삽입
console.log(greeting); // "Hello, Alice!"

 

 

 

 

2. 여러 줄의 문자열

여러 줄로 된 문자열을 쉽게 작성할 수 있다. 일반적인 문자열에서는 \n을 사용하거나 여러 줄에 걸쳐서 문자열을 연결해야 하지만, 템플릿 리터럴은 그냥 여러 줄을 그대로 쓸 수 있다.

let message = `안녕하세요,
여기는 여러 줄의 문자열입니다.
템플릿 리터럴을 사용하여 쉽게 작성할 수 있습니다.`;
console.log(message);

 

 

 

 

3. 표현식 삽입

${} 안에는 단순한 변수뿐만 아니라 계산식이나 함수 호출 등도 넣을 수 있다.

let a = 5, b = 3;
let sum = `두 수의 합은 ${a + b}입니다.`;
console.log(sum); // "두 수의 합은 8입니다."

 

 

 

 

---

 

 

 

JSP에서의 사용

 

 

JSP에서 사용 시에는 앞에 '\'를 붙여야 한다.

 

 

 

사용 예1. console문에서의 사용

const userId = document.getElementById("userId").value;

console.log(`userId : \${userId}`);

 

 

 

 

사용 예 2. fetch에서의 사용

const userId = document.getElementById("userId").value;

fetch(`/checkUserId?userId=\${userId}`)
    .then(response => response.text())
    .then(result => {
        if (result === "no") {
            alert("이미 사용중인 아이디입니다.");
            isUserIdValid = false;
        } else {
            isUserIdValid = true;
        }
    });