leteu / 개발 블로그
[JS] ES6 백틱 ( ` )
leteu
·2022. 1. 26. 10:46
백틱 모르는 사람들이 꽤 많은 거 같아 써본다.
※주의) 안 써본 사람들은 있어도 한 번만 써본 사람은 없다.
꼭 써보는걸 추천
#1 탬플릿 리터널
- ES6부터 도입된 문자열이다.
- 백틱 ( ` ` )을 사용한다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
Template literals - JavaScript | MDN
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문
developer.mozilla.org
위 문서를 기반으로 포스팅한 글이다.
한번 읽어보면 좋다.
#2 줄 바꿈
기존 문자열은 \n과 같은 거로 줄 바꿈 해야 했지만 이젠 그냥 엔터 치고 줄 바꿈 하면 그대로 들어간다.
- 기존
const temp = '줄바꿈\n줄바꿈';
- 백틱 사용
const temp = `줄바꿈
줄바꿈`
#3 변수 사용
기존엔 문자열 따옴표 사이사이마다 변수와 플러스(+)의 향연이었지만 이젠 더 이쁘게 사용할 수 있다.
이전엔 띄어쓰기 같은 경우에도 문자열에 넣어주고 더해줬지만 이젠 사이사이마다 ${}로 변수를 넣어줄 수 있다.
- 기존
const age = 21;
const gender = '남';
const nickname = 'leteu';
const temp = '별명: ' + nickname + ' / 나이: ' + age + ' / 성별: ' + gender;
- 백틱 사용
const age = 21;
const gender = '남';
const nickname = 'leteu';
const temp = `별명: ${nickname} / 나이: ${age} / 성별: ${gender}`;
#4 Dom 생성시
자바스크립트에서 Dom Element를 생성시 html 문자열을 짜야하는 상황이 있을 수 있다.
그때도 유용하게 쓸 수 있다.
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
</div>
</body>
</html>
- 기존
let temp = '';
temp += '<h3>박스</h3>';
temp += '<div>';
temp += '<span>텍스트</span>';
temp += '</div>';
document.getElementById('box').appendChild(temp);
- 백틱 사용
const temp = `
<h3>박스</h3>
<div>
<span>텍스트</span>
</div>
`;
document.getElementById('box').appendChild(temp);'프로그래밍 > Javascript & TypeScript' 카테고리의 다른 글
| [JS] 네비게이션 타이밍 가져오기 (새로고침, 뒤로가기, 네비게이트) (0) | 2023.10.13 |
|---|---|
| [JS] 배열 활용 map, filter, reduce, forEach, find 메소드 (0) | 2023.03.04 |
| [ JS ] 조건문 - If, Switch (0) | 2023.03.04 |
