[JavaScript] 템플릿 문자열

템플릿 문자열 : 문자열을 표현하는 새로운 방법

     문자열 결합 연산의 불편사항을 해소한 방법

 

기본 사용법: 백틱(')을 사용해 시작과 끝을 표현

 

데이터 삽입 : 템플릿 문자열 안에 ${데이터} 형태로 삽입!

 

데이터 삽입시 삽입 가능한 데이터 : 

자바스크립트에서 유효한 모든 데이터!

=> 반환값도 포함. 즉,연산식이 삽입될 수도 있다!

 

const age = 2;
const height = 50;

// 기존의 불편한 방법
var introduce = "제 나이는" + age + "살이고, 키는 " + height + "cm입니다!"

// 최신의 편리한 방법
let intro_adv = `제 나이는 ${age}살이고, 키는${height}cm입니다.`

console.log(introduce)
console.log(intro_adv)

// 기존 문자열
 // '이거 '+3 +'저거'

// 템플릿 리터럴 (백틱)

word ="hello"
word2="apple"
console.log(`이것도 문자열인데 ${word} ${word2} 이렇게 추가 가능!` )

 

 

예제) 템플릿 문자열 이용해 날짜 시간 표시하기

// 템플릿 리터럴을 이용해 날짜 시간 표시하자
const now = new Date()
const year = now.getFullYear()
const month = now.getMonth() + 1 
const date = now.getDate()
const hour = now.getHours()
const min = now.getMinutes()
const sec = now.getSeconds()

const time = `${year}/${month}/${date} ${hour}:${min}:${sec}`
console.log(time)