JavaScript(Template literals / Tagged literals)
1705 단어 JavaScriptJavaScript
template literals (backquote, backtick)
- 문자 중간 엔터키 입력이 가능
var 문자 = `안녕 하세요`;
- 문자 중간에 변수를 집어넣을 때 편리
var 이름 = '손흥민'; var 문자 = `안녕하세요 ${이름} 입니다`;
Tagged Literals
- ES6는 tagged literals라는 함수로 문자 해체분석기능이 가능.
- 문자 중간중간에 있는 단어 순서를 바꾸거나 변수를 제거하거나 할 때 유용.
- ``백틱 내의 문자들을 해체해서 원하는대로 다시 나열할 수 있게 도와주는 함수를 제작한 것.
var 변수 = '손흥민'; function 해체분석기(문자들, 변수들){ console.log(문자들); //["안녕하세요", "입니다"] console.log(변수들); // 손흥민 } 해체분석기`안녕하세요 ${변수} 입니다`;
- 맨 마지막줄에는 소괄호가 아닌
`문자`
를 붙여서 실행한다.- 첫째 파라미터 문자들은 `` 내의 순수 문자만 골라서 배열로 만들어놓은 파라미터.(${}를 기준으로 양옆 문자를 배열에 추가.)
- 둘째 파라미터 변수들은 `` 내의 ${} 변수를 담는 파라미터. (백틱 내에 변수가 2개 3개다 그러면 파라미터를 뒤에 더 추가.)
다음과 같은 코드에서는 문자들이 담긴 배열의 1번째 인덱스값과 변수가 차례로 출력된다.
var 변수 = '손흥민'; function 해체분석기(문자들, 변수들){ console.log(문자들[1] + 변수들); //(입니다손흥민) } 해체분석기`안녕하세요 ${변수} 입니다`;
응용
만약 바지와 양말의 값을 바꾸고 싶다면? (단어 순서 바꾸기)
var pants = 20; var socks = 100; function 해체분석기(a,b,c){ console.log(`${a[1]} : ${b} , ${a[0]}: ${c}`); // a[1],a[0] 차례로 출력 } 해체분석기`바지${pants} 양말${socks}`
만약 바지가 0일때 문자출력
var pants = 0; var socks = 100; function 해체분석기2(글자들, 변수1, 변수2){ if(변수1 === 0){ //pants 0일때 console.log(`${글자들[0]}다팔렸어요`) // 바지다팔렸어요 출력 } } 해체분석기2`바지${pants} 양말${socks}`
Author And Source
이 문제에 관하여(JavaScript(Template literals / Tagged literals)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pjh1011409/JavaScriptTemplate-literals-Tagged-literals저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)