안녕하세요. 터미네입니다.
이번 포스팅은 자바스크립트에 백틱 을 소개합니다.
백틱이란? 기호는 ` 를 말한다.
윈도우 키보드에서는 1 왼쪽에 ~ 모양이 있는데 Shift키를 누르면 백틱을 칠 수 있어요.
맥북 키보드에서는 윈도우 키보드의 위치와 동일한데,
한글타입일 경우 ₩를 칠 수 있지만
영문타입으로 바꾼뒤에 누르면 `을 칠 수 있습니다~
백틱으로 템플릿 리터럴을 사용할 수 있는데,
템플릿 리터럴을 왜 사용할까요?
백틱을 사용한 것과 사용하지 않은것의 차이를
예제로 살펴보겠습니다.
* 템플릿 리터럴을 사용한 예제 *
let fruit = `과일`;//백틱으로 템플릿리터럴 사용
let apple = `사과`;
let peach = `복숭아`;
//사과와 복숭아는 과일이다.
console.log(`${apple}와 ${peach}는 ${fruit}이다.`);
* 템플릿 리터럴을 사용하지 않은 예제 *
let fruit = '과일';//string 타입 선언
let apple = '사과';
let peach = '복숭아';
//사과와 복숭아는 과일이다.
console.log(apple + '와 ' + peach + '는 ' + fruit + '이다.');두 예제에서 console.log를 보고
차이점이 명확하게 보여지죠?
템플릿 리터럴을 사용했을때
+를 번거롭게 사용하지도 않았고
문자열 사이에 변수만 따로 ${}를 사용하여
직관적으로 구분이 가능하죠.
템플릿 리터털에서 ${}형태로 쓸 수 있는 파일은
확장자가 js여야 합니다.
즉 test.js에서만 위 예제처럼 사용할 수 있는 것이죠.
그렇다면
jsp나 html에 <script>태그 안에서도 사용하기 위해서는
어떻게 해야될까요?
바로 ₩ 기호를 ${} 앞에 붙이는 겁니다.
₩기호는 코드에서는 백슬러쉬를 의미합니다.
맥북에서는 한글상태에서 1 왼쪽에 ₩가 있고
영문상태에서는 `가 출력됩니다.
html 파일에서의 예제를 살펴볼게요.
<!DOCTYPE html>
<html>
<head>
<script>
let check = `템플릿 리터럴 예제!`;
// 잘써진다~ 템플릿 리터럴 예제!
console.log(`잘써진다~ ₩${check}`); //el표현식이 존재할 경우 ₩${}형식으로 활용
console.log(`잘써진다~ ${check}`); //el표현식이 없는 단순 html일 경우 ${}형식으로 활용
</script>
</head>
<body>
<div> 백틱사용 확인 </div>
</body>
</html>자바스크립트 파일이 아닌경우에는 위와 같이 사용되어집니다.
단순 html인 경우에는 템플릿 리터럴 규칙을 사용할 수 있지만,
Spring이나 Dynamic Web기반인 경우는 ${}앞에 ₩를 꼭 붙여야 합니다.
Spring을 아시는 분들은 el 표현식을 아실텐데
그 규칙이 html 혹은 jsp에서 ${}을 쓰거든요.
그 규칙과 겹쳐지지 않게 하기 위해
백틱사용하고 싶을 경우
₩${}로 사용할 수 있게 해주었나 봅니다.
여기까지 자바스크립트의 백틱사용법에 대해 알려드렸습니다.
백틱을 사용하여
템플릿 리터럴 활용법에 대한 포스팅은 아래 배너로 남겨드립니다.
백틱 활용하여 자체 grid를 만들어보기
안녕하세요. 터미네입니다. 이번 포스팅은 백틱으로 jqgrid처럼 만드는 것을 소개합니다. jqgrid가 무엇인지 모르시는 분들은 아래에 배너 클릭하셔서 꼭 한 번 봐주시면 되겠습니다. * jqgrid 기본사
danbam.asbai.xyz
긴글 읽어주셔서 대단히 감사드립니다.
'자바 웹 > front-end' 카테고리의 다른 글
| jQuery jqgrid 기본사용법 정리 local 방식 (0) | 2023.02.02 |
|---|---|
| json을 배열화 하는 방법 (0) | 2023.02.02 |
| jQuery change함수 사용하기 (0) | 2023.01.18 |
| jQuery 라디오버튼 체크박스 사용하기 (0) | 2023.01.17 |
| jQuery each문 사용법 (0) | 2023.01.17 |