1주차

Template Literals ++

kims1997 2022. 11. 19. 00:16
반응형

템플릿 리터널

자바스크립트에서 문자열을 입력하는 방식 기존에는 Var str ='Hello ES6' 와 같은 방식으로 사용

ES6 에서는 백틱(`) 이라는 기호 사용 자바스크립트 변수를 문자열 안에 바로 연결할 수 있는 이점이 생긴다

 

여러 줄에 걸쳐 문자열 선언하기

 

자바스크립트의 문자열 선언 방식인 작은 띠옴표(')의 문제점은  작은 띠옴표를 이용하여 긴 문자열을 선언하게 되면 자동으로 개행이되지않기떄문에 라인브레이커 인/n 를개행할 곳 중간 중간 에 추가 그러면 문장이 길수록 라인브레이커 를 계속 해줘야 하는 번거로움이 있다 

표현식 삽입

let a = 1;

let b = 10;

console.log('q*10*is' *(a*b));    (구버전)

신버전

let a = 1;

let b =10;

console.log(`1 * 10 is $ {a *b}`);

백틱(`)을 사용하여 간결하게 코드를 작성

여러 줄 문자열 생성

(구버전)

let  text = "Hello,/

my name kim\

how are you?\ ";

하지만 ES6 에서는 전체를 백틱으로 감싸기만 한다면 백슬래시 를 사용 안해도된다

let text =`hello,

my name is kim

how are you`;

(신버전)

중첩 템플릿

const people = [{                 

const markup = `
<ul>
	${people.map(person => `<li>  ${person.name}  </li>`)}
</ul>
`;

console.log(markup);

위에서는 map  함수를 이용하여 people 의 각 원소에 대해 반복 동작을 수행하고 people 내에 잇는 name 을 담아 li태그를 표시
  name: 'kim',
  age: 26,
}, { 
  name:'lee',
  age: 28,
},{
  name:'kkk',
  age:12,
}
];

다음과 같이 템플릿 안에 템플릿을 중첩하는 것도 간단해졌다

템플릿 리터럴에 함수 전달

삼항 연산자를 사용한다면 템플릿 문자열내에 로직을 쉽게 추가

const groceries = {
  meat: "pork chop",
  beggie: "salad",
  fruit: "apple",
  others: ['mushrooms', 'instant noodles', 'instant soup'],
};

// groceries의 각 값에 대해 map()을 수행하는 함수
function groceryList (others) {
  return `
	<p>
	  ${toehrs.map( other => ` <span>${other}</span>`).join('\n')}
	</p>
  `;
}

// p 태그 내 모든 groceries를 출력. 마지막은 others 배열의 모든 원소를 포함한다.

const markup = `
	<div>
	  <p>${groceries.meat}</p>
	  <p>${groceries.veggie}</p>
	  <p>${groceries.fruit}</p>
	  <p>${groceryList(groceries.others)}</p>
	</div>

태그된 템플릿 리터럴

+함수를 태그하여 템플릿 리터럴을 실행하면 템플릿 내부에 있는 항목이 태그된 함수의 인수로 제공

+작동 방식은 매우 간단하다 함수 이름을 가져다 실행할 템플릿 앞에 쓰기만 하면된다

let person = "kim";
let age =26;

function myTag(string, personName, personAge) {
  let str = string[1];
  let ageStr;
  
  personAge > 50 ? ageStr = "grandpa" : ageStr = "youngster";
  
  return personName + str + age5tr;
  
}
let sentence = mtTag `That ${phone} is a ${age}!`;
console.log(sentence);

 

+위에서 myTag 함수의 첫번째 인수는 string 는 let sentence 문의 전체 문자열 중 템플릿 리터럴 변수를 제외

+string 배열의 각 원소는 템플릿 리터럴에 포함된 변수들을 구분자로 사아 문자열로 나눈 결과와 같다

 

반응형