템플릿 리터럴
문자열을 백틱 `` 으로 표현하는 거.
(backtick = backquote) 같은말.
ES6에서 바뀌면서 생김.
기능 : 1. 엔터키를 사용해도 문자열이 깨지지 않는다.
기능 : 2. 중간에 변수 넣기가 좋다. ${변수명} 백틱 안에서만 가능. + 기호를 사용할 필요 없음
기능 : 3. append 템플릿 하거나 할때 유용.
기능 : 4. tagged literal.
함수를 실행시킬 때 소괄호가 아니라 문자를 이용해서 함수를 실행시킬 수 있다.
함수(안녕) 이걸 함수`안녕` 이렇게.
4번 기능은 좀 생소하니 자세히 살펴보자.
4. tagged literal
단어의 순서를 변경하거나, 단어를 제거하거나,
${변수} 위치를 옮기거나, 중괄호를 기준으로 `문자`를 해체 분석 할 수 있다.
var 변수 = '손흥민'
var latter = `안녕하세요 ${변수} 입니다`;
function 해체분석기(문자들, 변수들){
console.log(문자들);
console.log(변수들);
console.log(문자들[1] + 변수들 + 문자들[0]) //해체분석기 를 이용해서 글자 순서를 바꾼다.
};
해체분석기`안녕하세요 ${변수} 입니다`
tagged literal을 사용할 때에 함수의 파라미터
첫번째 파라미터 ___ 백틱 내의 순수 문자를 해체해 배열에 담아준다.
두번째 파라미터 ___ 첫 변수가 담아진다.
다른 변수가 또 있다면, 변수의 개수만큼 뒤에 파라미터를 추가해 줘야 한다.
//템플릿리터럴 _ tagged literal 연습
var pants = 0;
var socks = 100;
`바지${pants} 양말${socks}`
function disassembly (latter, variable1, variable2){
if(variable1 ===0){
latter.shift(); //첫번째 요소 지워줘
latter.unshift('바지안팔아요'); //첫번째 요소 괄호 안에 있는거로 넣어줘.
// 이렇게 했을때 나는 잘 작동 할 줄 알았는데 에러메세지
// Cannot assign to read only property '0' of object '[object Array]'
// 읽기 전용 데이터를 바꾸려고 해서 에러발생. 해결하려면 깊은 복사 해야함. (Spread Operator 사용.
console.log(`바지다팔렸어요 양말` + variable2) //이렇게 해야함.
}
}
spread operator는 다음 게시글에
'JS (Java Script)' 카테고리의 다른 글
이러터블 객체와 유사배열 (iterable) (array-like) (0) | 2023.09.06 |
---|---|
spread operator (깊은복사, 함수의 파라미터로 배열 넣기) (0) | 2023.09.06 |
전역변수 (0) | 2023.09.05 |
변수와 함수의 Hoisting 현상 (0) | 2023.09.05 |
object 값을 변경하기, 혹은 변경하지 못하게 하기. (0) | 2023.09.04 |