-
[JavaScript] ES2015 백틱(`)과 템플릿 문자열programming/JavaScript&jQuery 2019. 11. 22. 00:00반응형
백틱이란?
키보드 탭 위, 1의 왼쪽, '~'(물결표) 쯤에 있는 '와 비슷하게 생긴 문자다.
백틱(`)을 사용하면 ${}를 사용해서 문자열과 변수를 적절히 같이 사용할 수 있다.
이전 코드
const num1 = 10; const num2 = 20; console.log(num1 + ' + ' + num2 + ' = ' + (num1+num2) + " 입니다.");
문자열과 변수, 큰 따옴표와 작은따옴표, 문자 '+'와 연산기호 '+'등이 같이 있다.
코드상에서 큰따옴표나 작은따옴표를 잘못 붙이거나 해서 오류가 발생될 때가 제법 많다.
백틱 적용 ES2015 코드
const num1 = 10; const num2 = 20; console.log(`${num1} + ${num2} = ${num1+num2} 입니다.`);
문자열 사이에 변수만 따로 구분할 수 있게 해서 좀 더 직관적으로 볼 수 있다.
개발할 때 좀 더 편하게 할 수 있다.
멀티라인 문자열
이전 코드
console.log('line1\n' + 'line2');
한 줄을 띄우려는 효과를 주려면 '\n'을 사용해야 했고,
밑줄로 간 문자열은 '+'와 따옴표들로 감싸줘야 했다.
백틱 적용 ES2015 코드
console.log(`line1 line2`);
문자열 줄 바꿈을 위해 '\n'을 적어주거나 문자열을 이어 주기 위해 '+'를 사용할 필요가 없다.
백틱(`)내에서 줄이 바뀌면 알아서 줄 바꿈 출력이 된다.
더 많은 점은 아래에서 확인할 수 있다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
반응형'programming > JavaScript&jQuery' 카테고리의 다른 글
[JavaScript] 한글 keypress 이벤트 작동 안함 (0) 2019.12.21 [JavaScript] js 인터넷 연결 확인 (online) (0) 2019.12.11 [JavaScript] 에러처리 try..catch..finally..throw.. (0) 2019.11.12 [jQuery&html] html 요소 지우기 .remove() (0) 2019.11.06 [JavaScript] 함수 선언식과 표현식 (0) 2019.11.05