Template literal(템플릿 리터럴) If문 사용

Template literal(템플릿 리터럴) : ES6 (ECMAScript 2015)에서 도입된 문자열을 더욱 간편하게 생성하고 조작할 수 있는 기능. 역따옴표(backtick) (`) 문자로 감싸진 문자열을 의미하고 이 안에 변수, 표현식, 다른 문자열을 쉽게 포함시킬 수 있다.

 

템플릿 리터럴의 주요 특징

1. 변수 삽입

템플릿 리터럴 내에서 ${변수} 형식을 사용하여 변수를 삽입할 수 있다. 이렇게 삽입된 변수는 실제 값으로 대체되어 문자열이 생성된다.

const name = '철수';
const greeting = `제 이름은 ${name}입니다.`; // 제 이름은 철수입니다.

2. 다중 라인 문자열

다중 라인 문자열을 간편하게 작성할 수 있음. 일반적인 문자열에서는 줄바꿈을 위해 이스케이프 문자를 사용해야 했지만, 템플릿 리터럴 내에서는 그냥 엔터키를 사용하여 다중 라인을 만들 수 있다.

const multiLineString = `
  이것은
  멀티라인 문자열입니다.
  줄 바꿈이 그대로 유지됩니다.
`;

3. 문자열 내 특수문자 사용

역슬래시(backslash) (\)를 사용하지 않고도 특수 문자(따옴표, 역따옴표 등)를 문자열 내에서 사용할 수 있다.

const quoteExample = `She said, "Hello!"`; // She said, "Hello!"

4. 표현식 삽입

표현식을 삽입할 수 있다. 표현식은 ${} 안에 위치하며, 해당 표현식의 결과가 문자열로 변환되어 삽입된다.

const x = 10;
const y = 5;
const sum = `The sum of ${x} and ${y} is ${x + y}.`; // The sum of 10 and 5 is 15.

자바스크립트에서 표현식은 값을 생성하거나 반환하는 코드 조각을 말한다. 

템플릿 리터럴에 표현식과 변수를 삽입 할 수 있는 특징을 이용해서 아래와 같이 if문을 사용 할 수 있다.

const storeName = '김밥천국';
const tellNo = '010-1111-2222';
const text = `${storeName} 전화번호는 
 ${tellNo ? `${tellNo}` : ''} 입니다.`;
 // 김밥천국 전화번호는 \n 010-1111-2222 입니다.

 

● 참고자료

https://stackoverflow.com/questions/44488434/inserting-if-statement-inside-es6-template-literal