STRINGS - Sexy Strings

이번 String 파트는 ES6의 Template literals에 관한 내용이다.

템플릿 리터럴(Template literals)은 ES6에서 문자열에 표현식을 사용할 수 있게 해주는 표기법이다.

개인적으로 굉장히 좋아하는 옵션이기도 하다.

기존 우리는 문자열에 표현식을 쓰기위해서는 다음과 같이 사용했다.

const sayHi = (name = "anonymous") =>"hello" + name + "nice to meet you!"

console.log(sayHi())

기존과 같은 방식에서는 만약 표현식이 여러개라면 그에 맞게 여백과 + 를 일일이 계산하여 사용해야 했다.

그렇다면 템플릿 리터럴로 해당 문자열을 표기해보자.

//보통의 문자열표기법
const sayHi = (name = "anonymous") =>"hello " + name + " nice to meet you!"

//
const sayHi = (name) =>`hello ${name ? name : "anonymous"} nice to meet you!`
console.log(sayHi())

템플릿 리터럴은 기존의 문자열에 사용했던 "와 '아 아닌 `(backtick)를 사용한다.
그리고 표현식은 ${}를 사용해 표현할 수 있다.

상단의 예시처럼 일일이 여백을 생각하고 문자열과 표현식을 구분하여 + 를 추가해주고 일일이 문자열을 작성할 필요 없이 문자열을 작성하게되었고 간단한 표현식으로 따로 추가적인 작업을 해줄 필요가 없게 되었다.